Use npm modules written in ES6 with react-scripts

Question

In my project I need to use the npm module ipfs-api with create-react-app.

I can run npm start and run the proect.

But when I try to build the proect with react-scripts build, it throws the following error

Failed to compile.

Failed to minify the code from this file:

./node_modules/ipfs-api/src/utils/module-config.js:7

Read more here: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify

According to the suggestions in the provided link in eorror log, I tried using,

"dependencies": {
     ...
     "ipfs-api": "github:atfornes/js-ipfs-api#transpiled",
     ...
}

instead of "ipfs-api": "^22.0.0",. Although this solved error for ipfs-api, other dependent modules (probably installed with ipfsapi) kept giving same type of Failed to minify errors which I stopped transpiling them manually.

Is there a way to transile all the dependent node modules to es5 while before using the command react-scripts build ? Or any other way to overcome this issue?

Answer 1

Usually client-side or platform independent packages are compiled to ES5 on publishing. That you have this problem may suggest that the package isn't intended for client side.

As the documentation explains, the package contains a bundle for browsers that includes polyfilled Node features (streams, etc.) that are needed to run it on client side.

It's supposed to be used as a global:

import 'ipfs-api/dist';

ipfs(...)

Is there a way to transile all the dependent node modules to es5 while before using the command react-scripts build ?

This would require to eject create-react-app configuration and configure Webpack to transpile this package properly. This example from the documentation shows how Node-specific parts should be configured to bundled for browsers.