Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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'     } } 
like image 721
ryanzec Avatar asked Feb 03 '16 17:02

ryanzec


People also ask

What is CommonsChunkPlugin?

The CommonsChunkPlugin is an opt-in feature that creates a separate file (known as a chunk), consisting of common modules shared between multiple entry points.

What are chunks in Webpack?

Chunk: This webpack-specific term is used internally to manage the bundling process. Bundles are composed out of chunks, of which there are several types (e.g. entry and child).

What split chunks?

splitChunks. If the current chunk contains modules already split out from the main bundle, it will be reused instead of a new one being generated. This can affect the resulting file name of the chunk. webpack.config.js module.


1 Answers

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') 
like image 54
Ace Avatar answered Sep 28 '22 07:09

Ace