doesn't work with webpack.optimize.UglifyJsPlugin

[mqklin]

Demo
Demo

During bundle webpack throws: Unhandled rejection Error: Error: Child compilation failed: __react-static-webpack-plugin__template.js from UglifyJs SyntaxError: Unexpected token: operator (>) [__react-static-webpack-plugin__template.js:4156,20]

If I remove UglifyJsPlugin, it works fine... Very weird, how can I fix this?

[iansinnott]

Hm, thanks for the repro steps. I'm not sure what the issue might be, because I use the uglify plugin all the time. Maybe you need to provide a configuration object?

Many of the examples—which are also the tests—use the uglify plugin. Here for example. Maybe try using that example to reconfigure your demo?

[mqklin]

Ok, I changed your example a bit
The error is similar: Unhandled rejection Error: Error: Child compilation failed: 1.__react-static-webpack-plugin__routes.js from UglifyJs SyntaxError: Unexpected token: punc (:) [1.__react-static-webpack-plugin__routes.js:3,8]
Works just fine without UglifyJsPlugin

[iansinnott]

ah, i see. I've never tried using this library with require.ensure so my guess is that its simply doesn't work yet. I've never used require.ensure in my projects so i'm not sure what might be causing the error.

I might need to add a note to the readme about this limitation.

[mqklin]

No, it's not require.ensure problem. In my real project i use react-static-webpack-plugin and require.ensure without errors, but there is another limitation: i cannot use import directive with require.ensure in one module.

Before react-static-webpack-plugin my code was like this:

import MyModule1 from './MyModule1';
...
state = {
  MyModule2: () => null,
};
componentDidMount() {
  require.ensure([], () => {
    const MyModule2 = require('./MyModule2');
    this.setState({ MyModule2: MyModule2.default });
  });
}
render() {
  const { MyModule2 } = this.state;
  return (
    <div>
      <MyModule1 />
      <MyModule2 />
    </div>
  );
}

Then i included react-static-webpack-plugin and Unexpected token: punc (:) error appeared from uglifyjs. After playing a bit I converted all imports to require.ensure:

...
state = {
  MyModule1: () => null,
  MyModule2: () => null,
};
componentDidMount() {
  require.ensure([], () => {
    const MyModule1 = require('./MyModule1');
    const MyModule2 = require('./MyModule2');
    this.setState({
      MyModule1: MyModule1.default,
      MyModule2: MyModule2.default, 
    });
  });
}
render() {
  const { MyModule1, MyModule2 } = this.state;
  return (
    <div>
      <MyModule1 />
      <MyModule2 />
    </div>
  );
}

and now it works fine (even with uglify), like before react-static-webpack-plugin.

[mqklin]

With and without react-static-webpack-plugin compiled files without uglifyjs are exactly the same. And without react-static-webpack-plugin uglifyjs works without errors.
But react-static-webpack-plugin + uglifyjs throws the error SyntaxError: Unexpected token: punc (:)

webpackJsonp([0],{

/***/ 476: // <= react-static-webpack-plugin + uglifyjs fails here, but without react-static-webpack-plugin uglifyjs parses this file OK 
/***/ (function(module, exports, __webpack_require__) {
...

[mqklin]

In the source code, in the file utils.js i removed this check (line 158):

if (childCompilation.errors && childCompilation.errors.length && false) { // I added false here
        const errorDetails = childCompilation.errors.map((err) => {
          return err.message + (err.error ? ':\n' + err.error : '');
        }).join('\n');

        reject(new Error('Child compilation failed:\n' + errorDetails));
      }

and it work just fine now (except the same error message in console, but all files are in place and bundle is absolutely valid).

So now my package.json looks like this:

...
"react-static-webpack-plugin": "git+https://github.com/mqklin/react-static-webpack-plugin#fix-uglifyjs-error",
...

Ugly, but it works
Console output:

[ben181231]

Any update for this issue? I am still suffering this. 😢

[iansinnott]

@ben181231 are you using require.ensure?

[ben181231]

@ben181231 are you using require.ensure?

@iansinnott Thanks for the response. I finally found out that there is another issue causing that. 😅

[iansinnott]

Great to hear @ben181231! Could you share your solution? It might help someone else who runs into similar issues.

[ben181231]

The build log is here. But finally I found that I forgot to add one directory to the include list of the babel-loader. (That may be not related to the plugin)