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'
    }
}

If you're coming to this in 2017, you need to read [this excellent explanation](https://stackoverflow.com/questions/39548175/can-someone-explain-webpacks-commonschunkplugin) of how the plugin works. — Coderer, Sep 29 '17 at 13:15

score 15 · Answer 1 · answered Feb 17 '16 at 02:45

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

Did not work for me :( It just throws the same error, but with the other chunk name in the parenthesis — sqram, May 01 '16 at 02:06

score 14 · Answer 2 · answered Oct 07 '16 at 19:22

14

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.

answered Oct 07 '16 at 19:22

mp31415

6,531
1
44
34

I'm having this issue, I started with one plugin instance (array of names) and now I want to customize just one of the extracted chunks -- but trying to break it into two plugin instances, and getting the OP's error. – Coderer Sep 29 '17 at 09:47
What I've gotten experimentally is that your first plugin instance, regardless of how many `names` are specified, doesn't need to specify `chunks` or set `children:true`, but subsequent instances must specify one or the other of these (unless it's a runtime/manifest instance, i.e. the name is not the name of an entry). Man, this plugin is *complicated*. – Coderer Sep 29 '17 at 10:31

score 6 · Answer 3 · answered Jul 31 '17 at 19:41

The other answers talk about the order of the names in CommonsChunkPlugin which is true. But sometimes even after you correct the order (i.e 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
  })
]

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

3 Answers3