i tried to Polyfill modules in webpack 5 but not working (Reactjs)

Question

Hi guys am a newbie in React when i start my project i get the Wepback V5 Error Message

Resolve updated : https://github.com/facebook/create-react-app/issues/11756#issuecomment-1001162736

This What am using!

Os: Win11
Node : v16
React:v17
React-script : v5
Webpack:v5

This Error Message Contains

Crypto
Http
Https
Stream

Error Output

Compiled with problems:X

ERROR in ./node_modules/eth-lib/lib/bytes.js 9:193-227

Module not found: Error: Can't resolve 'crypto' in 'C:\Users\PC\Desktop\Portfolio\portfolio_app\node_modules\eth-lib\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
    - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "crypto": false }


ERROR in ./node_modules/web3-eth-accounts/lib/index.js 31:74-91

Module not found: Error: Can't resolve 'crypto' in 'C:\Users\PC\Desktop\Portfolio\portfolio_app\node_modules\web3-eth-accounts\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
    - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "crypto": false }


ERROR in ./node_modules/web3-eth-accounts/node_modules/eth-lib/lib/bytes.js 7:193-227

Module not found: Error: Can't resolve 'crypto' in 'C:\Users\PC\Desktop\Portfolio\portfolio_app\node_modules\web3-eth-accounts\node_modules\eth-lib\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
    - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "crypto": false }

Image Contain Output

Webpack5 Error Message

I have the same issue, and try fixing with many suggest solutions, but not work for me — user1916184, Dec 20 '21 at 10:06
the best way I found is to rewire the app. https://stackoverflow.com/questions/71085181/import-web3-into-react-js-getting-breaking-change-webpack-5-used-to-incl — Muneeb Zubair Khan, Jun 22 '22 at 19:10

score 32 · Accepted Answer · edited Dec 27 '21 at 11:55

I resolve these errors but my app did not render. If you are interested to clear these errors you can paste code right into your-project/node_modules/react-scripts/config/webpack.config.js but these changes can be overwritten after rebuilding your app. Find in module.exports object resolve and write fallback,in your case it's "crypto": require.resolve("crypto-browserify").

And install dependency npm install crypto-browserify.

resolve: {
//   fallback: {
//     "fs": false,
//     "tls": false,
//     "net": false,
//     "http": require.resolve("stream-http"),
//     "https": false,
//     "zlib": require.resolve("browserify-zlib") ,
//     "path": require.resolve("path-browserify"),
//     "stream": require.resolve("stream-browserify"),
//     "util": require.resolve("util/"),
       "crypto": require.resolve("crypto-browserify")
}

Or you can add fallback using react-app-rewired as was described in Github https://github.com/facebook/create-react-app/issues/11756 Install react-app-rewired, create config-overrides.js file in the root of your project. My code in the file

module.exports = function override (config, env) {
    console.log('override')
    let loaders = config.resolve
    loaders.fallback = {
        "fs": false,
        "tls": false,
        "net": false,
        "http": require.resolve("stream-http"),
        "https": false,
        "zlib": require.resolve("browserify-zlib") ,
        "path": require.resolve("path-browserify"),
        "stream": require.resolve("stream-browserify"),
        "util": require.resolve("util/"),
        "crypto": require.resolve("crypto-browserify")
    }
    
    return config
}

In package.json change scripts from 'start': 'react-scripts start' to 'start': 'react-app-rewired start'. Then start project npm run start or yarn start

@rsc05 did you install the " npm install react-app-rewired" dependency? Check https://www.npmjs.com/package/react-app-rewired — Anvar, Feb 13 '22 at 09:10
I am getting this error: `Module not found: Error: You attempted to import /my-project/node_modules/crypto-browserify/index.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.` Any idea how to resolve? thanks — Jeffrey C, Mar 23 '22 at 06:16
Messing around with node_modules is a bad idea... I don't know how you plan on deploying anywhere. — pguardiario, Aug 15 '22 at 04:39
@rsc05 you need to use "npm i react-app-rewired" to use this — Fome, Jan 27 '23 at 12:11
Thank you, I've seen numerous answers on this issue but only yours really helped in my case cuz I couldn't find the correct webpack.config.js to address these fallbacks. I was trying to add it next to tsconfig.json (I'm using Typescript) but it didn't help, so making changes to node_modules/react-scripts/config/webpack.config.js really solved the problem for me. — Nikita Kalganov, Jul 14 '23 at 18:04

score 18 · Answer 2 · answered Apr 08 '22 at 22:13

18

I solved my issue like this:

npm uninstall react-scripts
npm install react-scripts@4.0.3

answered Apr 08 '22 at 22:13

Zohab Ali

8,426
4
55
63

thank you. this was a clean solve for me. – sohammondal Oct 21 '22 at 08:20

Jay Patel · Answer 3 · 2022-09-16T05:55:22.140

11

To use polyfill in webpack 5 in reactjs Follow the below steps:

First Install npm install node-polyfill-webpack-plugin module.(reference link: https://www.npmjs.com/package/node-polyfill-webpack-plugin)
Then go to follow webpack.config.js --> node-module -> react-scripts -> config -> webpack.config.js
Then add below code:

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")

module.exports = {
    // Other rules...
    plugins: [
        new NodePolyfillPlugin()
    ]
}

edited Sep 16 '22 at 05:55

answered May 09 '22 at 09:13

Jay Patel

218
2
8

This is the only solution worked for me with `react@18.2.0` and `react-scripts@5.0.1`. Many thanks – Vikram Sep 09 '22 at 17:02
webpack.config.js file not present in my react project – J4GD33P 51NGH Sep 16 '22 at 05:25
unfortunately this won't work. Also not sure if this package is supported by the author. – Dev Oct 19 '22 at 04:24

Steve Winnington · Answer 4 · 2021-12-21T09:19:15.140

5

This looks like a new issue with many packages including web3 as these are not compatible with Webpack v5 without adding fallbacks for the polyfils.

Issue noted here: https://github.com/facebook/create-react-app/issues/11756

I solved this issue by adding the fallback to my webpack.config.js file;

module.exports = {
    resolve: {
        fallback: {
            assert: require.resolve('assert'),
            crypto: require.resolve('crypto-browserify'),
            http: require.resolve('stream-http'),
            https: require.resolve('https-browserify'),
            os: require.resolve('os-browserify/browser'),
            stream: require.resolve('stream-browserify'),
        },
    },
};

but also need but got compilation errors on the build process:

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory" error

this was resolved by adding to my .env file;

GENERATE_SOURCEMAP=false

hope this helps.

edited Dec 21 '21 at 09:19

answered Dec 21 '21 at 09:05

Steve Winnington

101
2

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Neeraj Dec 21 '21 at 09:53
5

I came across the same fallback hints given by the react error messages and I added the exact code to `\project-root\webpack.config.js` but I don't believe react is reading my custom `webpack.config.js`. How did you get react to read the custom config? – Jan 29 '22 at 02:50
I also have the same problem with react-scripts reading the `webpack.config.js` file. – David Yerrington Dec 18 '22 at 03:32

Eason · Answer 5 · 2023-01-11T09:47:58.503

My solution is to using Craco module to override the Webpack ModuleScopePlugin and resolving it to use browser-compatible modules.

You can also use react-app-rewire module.

Add other Node.js modules to the require.resolve field if you need.

Install modules

yarn add @craco/craco crypto-browserify path-browserify stream-browserify -D

Add craco.config.js

module.exports = {
  webpack: {
    configure: webpackConfig => {
      const scopePluginIndex = webpackConfig.resolve.plugins.findIndex(
        ({ constructor }) => constructor && constructor.name === 'ModuleScopePlugin'
      );

      webpackConfig.resolve.plugins.splice(scopePluginIndex, 1);
      webpackConfig['resolve'] = {
        fallback: {
          path: require.resolve("path-browserify"),
          crypto: require.resolve("crypto-browserify"),
          stream: require.resolve("stream-browserify"),
        },
      }
      return webpackConfig;
    },
  },
};

Replace scripts fields in package.json

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "craco eject"
},

score 2 · Answer 6 · answered Aug 18 '22 at 17:42

As I don't have enough reputation to edit or comment on this answer, I had to create a new answer that works for me. Basically one would also need to install readline.

Namely:

npm uninstall react-scripts
npm install react-scripts@4.0.3
npm install readline

score 0 · Answer 7 · answered Oct 03 '22 at 11:50

0

In my case a not used component importing led to the error. Simply remove unwanted component imported.

import {ReactDOM} from "React"

answered Oct 03 '22 at 11:50

Alireza Abdollahnejad

921
8
9

i tried to Polyfill modules in webpack 5 but not working (Reactjs)

7 Answers7

Linked