Manifest when using multiple vendors and commons chunks simultaneously

I followed the example in common-chunk-and-vendor-chunk but I’m also using multiple instances of the CommonsChunkPlugin. Here is the relevant configs:

{

  entry: {

    'desktop/index': './js/desktop/index.js',
    'desktop/post': './js/desktop/post.js',
    'desktop/vendor': [
      'jquery'
    ],

    'mobile/index': './js/mobile/index.js',
    'mobile/vendor': [
      'jquery'
    ]

  },

  output: {
    filename: '[name].[chunkhash].js',
    chunkFilename: 'chunk.[chunkhash].js',
    path: path.resolve(__dirname, 'dist')
  },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ['desktop/common', 'desktop/vendor'],
      chunks: ['desktop/index', 'desktop/post'],
      minChunks: 2
    }),
    new webpack.optimize.CommonsChunkPlugin({
      names: ['mobile/common', 'mobile/vendor'],
      chunks: ['mobile/index'],
      minChunks: 2
    })
  ]

};

And the build seems to be correct:

                                 Asset       Size   Chunks                    Chunk Names
  mobile/index.baa6ab4a4f62f25564ff.js    1.42 kB  0, 5, 6  [emitted]         mobile/index
 desktop/index.236c4e6e375a870d353b.js  887 bytes     1, 6  [emitted]         desktop/index
  desktop/post.7ca5365953dac57d7302.js  524 bytes     2, 6  [emitted]         desktop/post
desktop/vendor.b2e3b72f531e1a0ab842.js     274 kB  3, 4, 6  [emitted]  [big]  desktop/vendor
 mobile/vendor.4330c96ca776ad08e16c.js     274 kB  4, 3, 6  [emitted]  [big]  mobile/vendor
desktop/common.5a885605fc51ff0a90f2.js    5.92 kB     5, 6  [emitted]         desktop/common
 mobile/common.eb6b4a3b2aeb1164ec5f.js    5.75 kB        6  [emitted]         mobile/common

I added the files to my pages in the following order:

<script src="dist/desktop/vendor.b2e3b72f531e1a0ab842.js" charset="utf-8"></script>
<script src="dist/desktop/common.5a885605fc51ff0a90f2.js" charset="utf-8"></script>
<script src="dist/desktop/index.236c4e6e375a870d353b.js" charset="utf-8"></script>

and then I got the following error:

Uncaught TypeError: Cannot read property 'call' of undefined     vendor.b2e3b72….js:55 
    at __webpack_require__ (vendor.b2e3b72….js:55)
    at Object.5 (index.236c4e6….js:17)
    at __webpack_require__ (vendor.b2e3b72….js:55)
    at webpackJsonpCallback (vendor.b2e3b72….js:24)
    at webpackJsonpCallback (common.5a88560….js:19)
    at index.236c4e6….js:1

Seems like I also need something like a manifest file, but there’s none in the example and I’m not sure if this is a bug or the expected behavior. I’ve made a repo that you guys can clone to reproduce this behavior.

System info:

OS: Linux Mint 18 Cinnamon 64-bit
Node version: 6.10.0
NPM version: 4.3.0
Webpack version: 2.2.1

Author: Fantashit

4 thoughts on “Manifest when using multiple vendors and commons chunks simultaneously

  1.     new webpack.optimize.CommonsChunkPlugin({
          names: ['desktop/common', 'desktop/vendor'],
          chunks: ['desktop/common', 'desktop/index', 'desktop/post'],
          minChunks: 2
        }),
        new webpack.optimize.CommonsChunkPlugin({
          names: ['mobile/common', 'mobile/vendor'],
          chunks: ['mobile/common', 'mobile/index'],
          minChunks: 2
        })
  2. I can’t figure this out.
    @MtDalPizzol how do we create multiple bundles with:
    . entry file (i.e: apps/admin/index.js)
    . vendor file (i.e: lodash, react, whatever)
    . manifest file
    ?
    Did you sort this out?

  3. @sokra
    You guys really should do something with CommonsChunkPlugin and code splitting practice in Webpack. Rocket science seems easier than code splitting in Webpack now.

Comments are closed.