在开发和生产模式下运行Webpack时出现此错误。我让它消失的唯一方法是删除所有节点模块。这显然不是解决方案。这是我第一次尝试使用Webpack。
未捕获的错误：目标容器不是DOM元素。
在invariant（webpack-internal：/// 48:42）
webpackcommons.js
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
// const nodeExternals = require('webpack-node-externals')
module.exports = {
entry: {
app: './src/index.js',
vendor: ['react', 'redux'],
},
plugins: [
new CleanWebpackPlugin('dist'),
new HtmlWebpackPlugin({
title: 'React Production'
}),
new ExtractTextPlugin({
filename: "styles.css"
}),
],
// Loaders configuration
// We are telling webpack to use "babel-loader" for .js and .jsx files
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
'babel-loader',
],
},
// Files will get handled by css loader and then passed to the extract text plugin which will write it to the file we defined above
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use:"css-loader"
})
},
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000'
},
{ test: /\.eot(\?v=\d+.\d+.\d+)?$/,
loader: 'file-loader'
},
{ test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader']
},
// File loader for image assets -> ADDED IN THIS STEP
// We'll add only image extensions, but you can things like svgs, fonts and videos
{
test: /\.(jpg|jpeg|gif|png)$/,
exclude: /node_modules/,
loader:'file-loader?name=img/[name].[ext]&context=./app/images',
},
{
test: /\.(ico)$/,
exclude: /node_modules/,
loader:'file-loader?name=[name].[ext]&context=./app/images',
},
{
test: /\.js$/,
use: ["source-map-loader"],
enforce: "pre",
exclude: [/node_modules/, /build/, /__test__/],
},
],
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[hash].js',
sourceMapFilename: "bundle.js.map"
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
};
]
这是Index.js文件。
import "babel-polyfill"
import React from "react"
import ReactDOM from "react-dom"
import { Provider } from "react-redux"
import { createStore, applyMiddleware, compose } from "redux"
import thunk from "redux-thunk";
import rootReducer from './store/reducer/index'
// Routing
import { BrowserRouter as Router} from "react-router-dom";
// Styling
import "./styles/styles.css";
import App from "./containers/App";
import registerServiceWorker from "./registerServiceWorker";
// Reducers
import reducers from "./store/reducer";
// GraphQL
import { ApolloProvider } from 'react-apollo';
import client from "./apollo";
if (process.env.NOD_ENV !=='production') {
console.log('Looks like we are in development mode!')
}
const logger = store => {
return next => {
return action => {
// console.log('[Middlnaeware] Dispatching', action)
const result = next(action)
// console.log('[Middleware] next state', store.getState())
return result
}
}
}
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
const store = createStore(
reducers, rootReducer,
composeEnhancers(applyMiddleware(logger, thunk))
)
ReactDOM.render(
<ApolloProvider client={client}>
<Provider store={store}>
<Router>
<App />
</Router>
</Provider>
</ApolloProvider>,
document.getElementById('root')
)
registerServiceWorker()
这是index.html文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<title>Rhino Tracking Admin</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
有关这个问题的任何想法？
Webpack的入口指向index.js，需要指向我的项目index.js的app.js。