webpackJsonp is not defined: webpack-dev-server and CommonsChunkPlugin

Question

This is my webpack.config.js file:

const webpack = require('webpack');
const path = require('path');

module.exports = {
  cache: true,
  devtool: 'source-map',
  entry: {
    app : [
      './src/index.js'
    ],
    vendor: ['lodash']
  },
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist'),
    publicPath: '/dist/',
    pathinfo: true
  },
  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loaders: ['babel'] },
      { test: /\.scss/, exclude: /node_modules/, loaders: ['style', 'css', 'sass'] }
    ]
  },
  plugins: [
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js', Infinity)
  ]
};

And this is my scripts that runs the webpack-dev-server:

const webpack =require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const webpackConfig = require('../webpack.config');
const _  = require('lodash');

const webpackDevConfig = _.cloneDeep(webpackConfig);
const devPort = 3000;

webpackDevConfig.entry.app.unshift('webpack/hot/dev-server');
webpackDevConfig.entry.app.unshift('webpack-dev-server/client?http://localhost:' + devPort + '/');
webpackDevConfig.plugins.push(new webpack.HotModuleReplacementPlugin());

new WebpackDevServer(webpack(webpackDevConfig), {
  publicPath: webpackConfig.output.publicPath,
  hot: true,
  stats: {
    colors: true,
    chunks: false
  }
}).listen(devPort, 'localhost');

The webpack command output is good (bundle.js and vendor.bundle.js), however, the dev server fails with webpackJsonp is not defined (although its in-memory compilation succeeded).

When removing CommonsChunkPlugin from webpack.config.js - it all works fine:

...
entry: [
    './src/index.js'
  ],
...
plugins: [
    new webpack.NoErrorsPlugin()
  ]

Any ideas?

Invalidism

Have you find a solution ? – Cuthbert

Answer 1

In your index.html file just call vendor.bundle.js before bundle.js

<script src="assets/js/vendor.bundle.js"></script>
<script src="assets/js/bundle.js"></script>

That's all, now it should work. More information.

Palacio

Answer 2

Rename vendor entry point to

'vendor.js': ['lodash']

Cassius

It didn't work. I tried it already when I saw github.com/webpack/webpack/issues/368. I also tried it with passing an object to commonschunkplugin plugin (instead of 3 params...) and it didn't work as well... :( – Invalidism

Answer 3

Just to expand a little on the concept, the vendor has to come first since the runtime is contained in there (everything that defines all the variables and methods run during client load time because of all the webpacking).

If you use a manifest file (because of chunking and so on), you'll have to put that first since it will then contain the runtime because of the way the module is built.

Boutte