Info: Fails to build a minified create-react-app with ipfs

[fsdiogo]

There are a lot of issues regarding create-react-app and js-ipfs, let's keep that discussion in this one, as well as options to make them play well together.

✅ js-ipfs minified version

The minified version of IPFS (when you run npm run build and outputs to dist/index.min.js) wasn't being uglified (compressed and mangled) due to the way we were doing some type checks. This has been solved and will be available in the 0.29.0 release.

ℹ️ create-react-app

For those who are using create-react-app with IPFS, you'll still encounter some issues when trying to build a production version. The problem comes from create-react-app itself and not IPFS, because it uses UglifyJS that still doesn't support ES6. As IPFS doesn't offer a transpiled version, trying to build a production version of a CRA with IPFS will fail to minify. A new version of CRA is being worked on, using uglify-es that supports ES6. Until then, developers have a few options:

• Eject and change the webpack configs to use uglify-es intead of uglify-js
  • Until the 0.29.0 release lands, you'll have to follow these configs: Info: Fails to build a minified create-react-app with ipfs #1321 (comment)
• Import the IPFS with a script tag
  • After the 0.29.0 release you'll be able to import the bundled & minified version
• Use this trick that @fazo96 pointed out

[eugenioclrc]

Hi! i saw your bounty in gitcoin. I have try to replicate the error with no success.

What version of node are you using? have you try with the latest LTS (v8.11.1)

[abitrolly]

@eugenioclrc thanks for the heads up, I believe we used yarn rum build. @Pechalka can you confirm that the problem with building the project is solved now?

I am going to award the bounty to @fsdiogo anyway for dealing with webpack bundling the proper way. @fsdiogo, can you please go to https://gitcoin.co/issue/ipld/js-cid/38/121 and claim the bounty?

Also thanks @AquiGorka and @dimkk for putting effort into solving the build issue. I wish I had more funds to split for everyone involved, and I think we all agree that @fsdiogo did a good job here.

[fsdiogo]

Hey @abitrolly, I fixed the uglify issue in js-ipfs that will be available in the 0.29.0 release.

But, the bundling of js-ipfs with a create-react-app didn't get fixed, we'll have to wait for a new CRA release which will use uglify-es. Until then you can use the solutions in the first comment.

I'll gladly collect the bounty, but only if I solved your problem 🙂

[Timer]

Just to set expectations, we're in no rush to get create-react-app 2.0 out (I expect a few months yet).

The best way to deal with this is to compile your package if you wish for people to use it in the browser.

[fsdiogo]

Thanks for the input @Timer.

Yes, we're already discussing a way to offer a compiled version of js-ipfs, we'll see how that goes!

[olizilla]

Eject and change the webpack configs to use uglify-es intead of uglify-js

Until the 0.29 release lands, you do still need to provide config to the UglifyJsPlugin (which now uses uglify-es) to get it to compress IPFS without breaking things. Here is what we're using in peer-pad webpack config now:

new UglifyJsPlugin({
  // see: https://github.com/webpack-contrib/uglifyjs-webpack-plugin#options
  cache: true,
  parallel: true,

  // see: https://github.com/mishoo/UglifyJS2/tree/harmony#minify-options
  uglifyOptions: {
    compress: {
      // Needed to minify js-ipfs, see: https://github.com/ipfs/aegir/pull/214
      unused: false,
      // Needed to minify js-ipfs until v0.29 see: https://github.com/ipfs/js-ipfs/issues/1321
      keep_classnames: true,
      // 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,
      // don't display warnings when dropping unreachable code
      warnings: false,
    },
    mangle: {
      // Needed to minify js-ipfs until v0.29 see: https://github.com/ipfs/js-ipfs/issues/1321
      keep_classnames: true,
      safari10: true,
    },
    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,
  }
}),

that's a merge of the ejected create-react-app recommendations with the tweaks to preserve js-ipfs

See: https://github.com/ipfs-shipyard/peer-pad/blob/1f6bb61a1abe2fe0a76a343156c7bbc79346f3e3/config/webpack.config.prod.js#L268-L302