Compile Error when using Uglify in Webpack/React Build Process

[kamescg]

Describe the bug
When attempting to compile my React project using a Webpack setup that includes Uglify I get the following error.

Unexpected token punc «{», expected punc «,» [./node_modules/cids/src/index.js:24,0][embed.js:5944,25]

I've narrowed it down to the 3Box module, because when I comment out the import the project will compile without any issues.

// import ThreeBox from '3box';

Uglify settings configuration.

new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false,
    // Disabled because of an issue with Uglify breaking seemingly valid code:
    // https://github.com/facebookincubator/create-react-app/issues/2376
    // Pending further investigation:
    // https://github.com/mishoo/UglifyJS2/issues/2011
    comparisons: false,
  },
  output: {
    comments: false,
    // Turned on because emoji and regex is not minified properly using default
    // https://github.com/facebookincubator/create-react-app/issues/2488
    ascii_only: true,
  },
  sourceMap: shouldUseSourceMap,
}),

I haven't experienced this issue before with another module.

To Reproduce
Steps to reproduce the behavior:

1. Create React App (create-react-app)
2. Import the 3box module dependency
3. Build/Compile project code

Expected behavior
Generate project assets to share with the world.

[oznekenzo]

Yep - when I do it, my error reads

Failed to minify the code from this file:

 	./node_modules/cids/src/index.js:24

Also from importing the 3box lib

[kamescg]

To my knowledge Uglify is unable to parse ES6, so presumably during the build process not everything is being properly compiled to ES5.

Just for fun tried running the build process with babel-preset-es2015 but that didn't work either.

[kamescg]

So it appears the cids module, required by a number of IPFS dependencies, is potentially the culprit. However, I find this a bit strange, because I've added these dependencies before and not run into this issue...

[zachferland]

yeah it seems to be that module, and that could be es6, while the build would not be babelifying all the node modules. What i'm not following yet, is the webpack build/config in the 3box-js lib uses uglify, and the build works fine. Could be the webpack version and versions of the plugins connected, example above look like and older version of webpack.

[zachferland]

Turnouts to be a combination of what both @kamescg and I said. cids not precompiled, as mentioned, included in many ipfs lib, and they have decided not to precompile their libs. Then on the other hand create-react-app has not changed to a later version of uglify which could parse both es6/5. (some digging looks like they might have upgraded in V2 but still set options to require es5, not too sure).

Anyways these issues in other repos include summaries of these problems - ipfs/js-ipfs#1321 and ipfs-inactive/js-ipfs-http-client#611.

One option is to eject and change the webpack configs in create-react-app. Reference issues above and/or the webpack config here in 3box repo for builds that are successful. Or require/import the already built dist file in our package at 3box/dist/3box.min.js.

Closing this issue for now, based on info above. (cc @kamescg @oznekenzo )