Uncaught Error: Target container is not a DOM element. webpack

Question

I'm getting this error when running Webpack in both dev and production modes. The only way that I have gotten it to go away was to remove all node modules. This obviously is not a solution. This is my first attempt to use Webpack.

Uncaught Error: Target container is not a DOM element.

at 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']
  },
};

]

Here is the Index.js file.

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()

here is the index.html file.

<!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>

Any ideas on this issue?

Answer 1

Webpack的入口指向index.js，而我的项目index.js则需要指向app.js。