webpack ERROR in CommonsChunkPlugin: While running in normal mode it's not allowed to use a non-entry chunk

Question

So When I try to split my application into 1 application.js file and 1 libraries.js file, everything works fine. When I try to split it up into 1 application.js file and 2 libraries.js files, I get this error when building:

ERROR in CommonsChunkPlugin: While running in normal mode it's not allowed to use a non-entry chunk (libraries-react)

Anyone know what might be causing this error?

My configuration for webpack is

var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");

var extractSass = new ExtractTextPlugin('main.css');

module.exports = {
    module: {
        loaders: [{
            test: /\.jsx$/,
            loader: 'babel',
            exclude: ['./node_modules'],
            query: {
                presets: ['react', 'es2015']
            }
        }, {
            test: /\.scss$/,
            loader: extractSass.extract(['css', 'sass'])
        }, {
            test: /\.html$/,
            loader: 'file?name=[name].[ext]'
        }, {
            test: /\/misc\/.*\.js$/,
            loader: 'file?name=/misc/[name].[ext]'
        }, {
            test: /\.(png|jpg|jpeg|)$/,
            loader: 'file?name=/images/[name].[ext]'
        }]
    },
    plugins: [
        extractSass,
        new webpack.optimize.CommonsChunkPlugin('libraries-core', 'libraries-core.js'),
        new webpack.optimize.CommonsChunkPlugin('libraries-react', 'libraries-react.js')
    ],
    entry: {
        //3rd party libraries
        'libraries-core': [
          'lodash',
          'superagent',
          'bluebird',
          'eventemitter3',
          'object-assign',
          'schema-inspector',
          'jsuri',
          'store-cacheable',
          'immutable'
        ],

        'libraries-react': [
          'react',
          'react-dom',
          'react-router',
          'nucleus-react'
        ],

        //application code
        application: './web/app/application.jsx',

        //mocks
        'mocked-api': './web/app/mock/api.js',
        'mocked-local-storage': './web/app/mock/local-storage.js'
    },
    output: {
        path: './web/build',
        publicPath: '/build',
        filename: '[name].js'
    }
}

Answer 1

Following the github issue#1016 , you need to reverse the order of the chunk names in plugin definition regarding to the entry points' definition

It seems like a bug to this webpack plugin for the time being...

new webpack.optimize.CommonsChunkPlugin('libraries-react', 'libraries-react.js')
new webpack.optimize.CommonsChunkPlugin('libraries-core', 'libraries-core.js')

or

new webpack.optimize.CommonsChunkPlugin({names: ['libraries-react', 'libraries-core'], filename: '[name].js')

Answer 2

Switching from two entries for the CommonChunkPlugin to a single one helped in my case.

Before:

plugins: [
    new webpack.optimize.CommonsChunkPlugin('libraries-core', 'libraries-core.js'),
    new webpack.optimize.CommonsChunkPlugin('libraries-react', 'libraries-react.js')
]

After:

plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ['libraries-core', 'libraries-react'],
      minChunks: Infinity
   })
]

It's based on the two-explicit-vendor-chunks example.

Answer 3

The other answers talk about the order of the names in CommonsChunkPlugin which is true. But sometimes even after you correct the order (ie reverse of the order given in entry), webpack still might throw the same error.

And this is when you're using another CommonsChunkPlugin instance to extract commons - eg. explicit-webpack-runtime-chunk, again the order matters - here the order of instances in the config's plugins list. Simply, move this instance after the CommonsChunkPlugin for explicit-vendor-chunks. For example,

plugins: [
  // explicit-vendor-chunk
  new CommonsChunkPlugin({
    names: ["vendor-2", "vendor-1"],
    minChunks: Infinity
  }),

  // and the following should go after explicit-vendor-chunk
  // in the list of plugins

  // explicit-webpack-runtime-chunk
  new CommonsChunkPlugin({
    name: "manifest", // something that's not an entry
    minChunks: Infinity
  })
]