CommonChunksPlugin breaks build

[dlebedynskyi]

Thanks for working on this component. It looks like it going to be very handy.
I'm running into issue on production build with uglifyjs.
It only happens for production build.

My config

//package.json
"build": "NODE_ENV=production webpack --config src/config/webpack.config.prod.js -p",

//webpack.config.prod.js
entry: {
    vendor,
    app: ['babel-polyfill', `${SRC}/styles/app.scss`, `${SRC}/client-entry.js`]
  },
module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.jsx?$/,
        include: [/src/],
        loader: 'babel',
        query: {
          plugins: [
           [
              'code-split-component/babel',
              {
                disabled: false
              }
            ]
          ]
        }
      },
... 

prodConfig.module.loaders.push({
  test: /\.jsx?$/, loader: WebpackStrip.loader('console.log', 'console.debug')
});

prodConfig.plugins.push(new CodeSplitPlugin());

Gives

ERROR in vendor.ce7455f2b338600395b1.js from UglifyJs
SyntaxError: Unexpected token num «820075192», expected punc «:» [webpack/bootstrap 6f7c862bd7fb36d95dc3:55,0][vendor.ce7455f2b338600395b1.js:56,12]

for reference

// vendor has
module.exports = [
  'debug',
  'react',
  'react-dom',
  'react-helmet',
  'react-redux',
  'redux',
...
]

Have no issues without prodConfig.plugins.push(new CodeSplitPlugin());

[ctrlplusb]

Hi @dlebedynskyi;

Thanks! I hope you find it useful. :)

Can you please share your configuration? I am running with this component in react-universally which contains uglifyjs for the production build. It's building fine for me. I need to see if there are any differences.

[dlebedynskyi]

@ctrlplusb sure. updated post above
also

//.babelrc
{
  "sourceMaps": true,
  "presets": ["react", "es2015", "es2016"],
  "plugins": [
    ["transform-regenerator", {
      "async": true
    }],
    ["babel-plugin-transform-builtin-extend", {
        globals: ["Error"]
    }],
    "transform-export-extensions",
    "transform-class-properties",
    "transform-object-rest-spread",
    "transform-object-assign",
    "react-hot-loader/babel"
  ]
}

Edit. also just noticed I've also

// build chunk with chunk hash
prodConfig.plugins.push(new webpack.optimize.CommonsChunkPlugin(
  {name: ['vendor'], minChunks: Infinity})
);

[ctrlplusb]

@dlebedynskyi thanks.

This is very weird but the issue arises out of using the -p flag.

Try adding uglifyjs explicitly rather:

       new webpack.optimize.UglifyJsPlugin({
          // sourceMap: true,
          compress: {
            screw_ie8: true,
            warnings: false,
          },
          mangle: {
            screw_ie8: true,
          },
          output: {
            comments: false,
            screw_ie8: true,
          },
        })

        new webpack.LoaderOptionsPlugin({
          // Indicates to our loaders that they should minify their output
          // if they have the capability to do so.
          minimize: true,
          // Indicates to our loaders that they should enter into debug mode
          // should they support it.
          debug: false,
        })

[dlebedynskyi]

ok so quick update
if I remove

// build chunk with chunk hash
prodConfig.plugins.push(new webpack.optimize.CommonsChunkPlugin(
  {name: ['vendor'], minChunks: Infinity})
);

all build well.
also if prodConfig.plugins.push(new CodeSplitPlugin()); is after CommonsChunkPlugin - no problems.

[ctrlplusb]

Ok, so in your build it has to be the last plugin?

[dlebedynskyi]

@ctrlplusb ok. after more testing - it looks like CommonsChunkPlugin (in config above) does not goes well with CodeSplitPlugin no matter of order. forgot to save file before run that lead to wrong results.
please try it yourself to make sure this is not some of my local stuff.

[ctrlplusb]

Got a fix! :)

[ctrlplusb]

npm i code-split-component@2.0.0-alpha.2 -S

[ctrlplusb]

@dlebedynskyi Please test and let me know.

[dlebedynskyi]

@ctrlplusb and it fixed. good job. that was fast)