19

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

3

5 Answers 5

15

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

5
  • Thanks Bro u deserve an upvote
    – Idriss
    Jan 4 at 22:40
  • react-app-rewired: command not found
    – Anonymous
    Feb 11 at 18:00
  • @rsc05 did you install the " npm install react-app-rewired" dependency? Check npmjs.com/package/react-app-rewired
    – Anvar
    Feb 13 at 9:10
  • 8
    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 at 6:16
  • Messing around with node_modules is a bad idea... I don't know how you plan on deploying anywhere. Aug 15 at 4:39
10

I solved my issue like this:

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

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

  1. First Install npm install node-polyfill-webpack-plugin module.(reference link: https://www.npmjs.com/package/node-polyfill-webpack-plugin)

  2. Then go to follow webpack.config.js --> node-module -> react-scripts -> config -> webpack.config.js

  3. Then add below code:

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

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

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.

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.
    – Neeraj
    Dec 21, 2021 at 9:53
  • 4
    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?
    – user1300214
    Jan 29 at 2:50
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.