Error compiling with CreateReactApp: 'minification failed' on scatter-js. Workaround: transpile with 'babel-preset-2015'

Using create react app and scatter-js, the build process fails on production builds when it attempts to minify/uglify the build.

Here is the documentation snippet from Facebook on the matter: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify

npm run build fails to minify Some third-party packages don’t compile their code to ES5 before publishing to npm. This often causes problems in the ecosystem because neither browsers (except for most modern versions) nor some tools currently support all ES6 features. We recommend to publish code on npm as ES5 at least for a few more years.

To resolve this: Open an issue on the dependency’s issue tracker and ask that the package be published pre-compiled. Note: Create React App can consume both CommonJS and ES modules. For Node.js compatibility, it is recommended that the main entry point is CommonJS. However, they can optionally provide an ES module entry point with the module field in package.json. Note that even if a library provides an ES Modules version, it should still precompile other ES6 features to ES5 if it intends to support older browsers. Fork the package and publish a corrected version yourself.

If the dependency is small enough, copy it to your src/ folder and treat it as application code.

In the future, we might start automatically compiling incompatible third-party modules, but it is not currently supported. This approach would also slow down the production builds.

For other developers / information purposes, the workaround that ended up working for me is the following:

There are 3 packages we need to transpile using babel-preset-2015:

• scatter-js
• web3-provider-engine
• eth-block-tracker

Resolution Steps

• npm install --save babel-preset-es2015
• Add the following additional entries in /config/paths.js in the module exports:

module.exports = {
...
  scatterSrc: resolveApp('node_modules/scatter-js'),
  web3Src: resolveApp('node_modules/web3-provider-engine'),
  ethBlockTrackerSrc: resolveApp('node_modules/eth-block-tracker'),
};

• Open /config/webpack.config.prod.js, find this section:

...
      {
        // "oneOf" will traverse all following loaders until one will
        // match the requirements. When no loader matches it will fall
        // back to the "file" loader at the end of the loader list.
        oneOf: [
...

Add a new babel loader entry for the paths we created:

          {
            test: /\.(js|jsx|mjs)$/,
            include: [
              paths.scatterSrc,
              paths.web3Src,
              paths.ethBlockTrackerSrc
            ],
            loader: require.resolve('babel-loader'),
            query: {
              presets: ['babel-preset-es2015'],
            }
          },

After this you should be able to run npm run build without any more issues.

[acoutts]

@brandedux @friedger yes eject CRA first.

[ChenLi0830]

Thank you for that @acoutts ! It worked for me. I wonder if that error is caused because scatter-js didn’t compile their code to ES5 before publishing to npm as indicated in the facebook instruction.