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?

Estus Flask · Accepted Answer · 2018-05-26 09:47:33Z

2

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.

answered May 26, 2018 at 9:47

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user8081170 Over a year ago

Thanks for the informative answer, I'll check and get back to you

user8081170 Over a year ago

I finally decided to build the react app from scratch rather than using create-react-app and to eject configs. Fortunately the app was in ti initial stage

Estus Flask Over a year ago

Glad you sorted this out. create-react-app eject provides a reasonable boilerplate project, can be better or worse than any other React+Webpack starter.

Collectives™ on Stack Overflow

Use npm modules written in ES6 with react-scripts

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related