Webpack 5 Errors - Cannot Resolve 'crypto', 'http', and 'https' in ReactJS Project

Question

I have created a new React project using npx create-react-app client and have encountered some issues with Webpack 5. Originally, I had errors with assert, os, and stream, but have fixed them by installing them and including them in webpack.config.js. The file is located in the client/src folders.

This is what the errors look like:

Compiled with problems:

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

    Module not found: Error: Can't resolve 'crypto' in 'C:\Users\Username\Projects\testProject\client\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-providers-http/lib/index.js 30:11-26

    Module not found: Error: Can't resolve 'http' in 'C:\Users\Username\Projects\testProject\client\node_modules\web3-providers-http\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: { "http": require.resolve("stream-http") }'
        - install 'stream-http'
    If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "http": false }

=================================================================

    ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 39:12-28

    Module not found: Error: Can't resolve 'https' in 'C:\Users\Username\Projects\testProject\client\node_modules\xhr2-cookies\dist'

    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: { "https": require.resolve("https-browserify") }'
        - install 'https-browserify'
    If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "https": false }

Code

This is what my webpack.config.js file looks like right now.

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'),
    },
  },
};

Below is my package.json file.

{
  "dependencies": {
    "assert": "^2.0.0",
    "crypto-browserify": "^3.12.0",
    "dotenv": "^10.0.0",
    "https-browserify": "^1.0.0",
    "os": "^0.1.2",
    "stream": "^0.0.2",
    "stream-http": "^3.2.0"
  }
}

As seen from the above, I have installed the suggested packages from the errors (crypto-browserify, stream-http, and https-browserify) and have included them in the webpack.config.js file. However, the errors still persist.

How do I solve this?

Dharman · Accepted Answer · 2021-12-26 17:53:17Z

somehow fixed it too using react-app-rewired Make sure you install this package and create new file config-overrides.js in your root directory

/* config-overrides.js */
const webpack = require('webpack');
module.exports = function override(config, env) {
    //do stuff with the webpack config...

    config.resolve.fallback = {
        url: require.resolve('url'),
        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'),
        buffer: require.resolve('buffer'),
        stream: require.resolve('stream-browserify'),
    };
    config.plugins.push(
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer'],
        }),
    );

    return config;
}

Now edit your package.json for making react-app-rewired to work.

//package.json

 "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "assert": "^2.0.0",
    "buffer": "^6.0.3",
    "crypto": "npm:crypto-browserify",
    "crypto-browserify": "^3.12.0",
    "https-browserify": "^1.0.0",
    "os-browserify": "^0.3.0",
    "react": "^17.0.2",
    "react-app-rewired": "^2.1.9",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "rewire": "^6.0.0",
    "stream": "npm:stream-browserify",
    "stream-browserify": "^3.0.0",
    "stream-http": "^3.2.0",
    "url": "^0.11.0",
    "web-vitals": "^2.1.2",
    "web3": "^1.6.1"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

I didn't added config-overrides.js file. Only updated the package.json and this works for me.

Wolfizzy · Accepted Answer · 2022-01-14 21:59:50Z

12

Instead of using Webpack 5, an alternative solution I have found is to downgrade to [email protected] and [email protected]. This is what I'll be using for now until I can find a better solution.

edited Jan 14, 2022 at 21:59

answered Dec 23, 2021 at 4:16

Wolfizzy

6811 gold badge7 silver badges19 bronze badges

2 Comments

trainoasis Over a year ago

The whole point is to update to cra 5 so we can get security updates (v4 has a lot of security vulnerabilities, see dependabot suggestions for example). So this is not an option ..

harkinian Over a year ago

The point of react-scripts is that it works out of the box. If webpack 5 has broken defaults, that needs to be fixed.

Dharman · Accepted Answer · 2021-12-21 09:28:14Z

9

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'),
        },
    },
};

using;

"dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.2",
    "web3": "^1.6.1"
  },

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

edited Dec 21, 2021 at 9:28

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Dec 21, 2021 at 9:22

Steve Winnington

1512 bronze badges

1 Comment

David Buck Over a year ago

Please don't paste the same answer to multiple questions. If the questions can be answered with the same answer, post a good answer to one of them, and flag the others as duplicates. If they aren't duplicates, you should tailor an answer to the specific question and not just cut/paste.

Jeff · Accepted Answer · 2022-06-15 19:01:21Z

2

In addition to above, using the react-app-rewired package trick.

So, 1) Install react-app-rewired 2) in packages.json replace react-scripts with react-app-rewired e.g.

 "start": "rimraf ./build && react-scripts start",

becomes

"start": "rimraf ./build && react-app-rewired start",

copy paste this in config-overrides.js (in the root of your app)

    // config-overrides.js
    module.exports = function override(config, env) {
       // New config, e.g. config.plugins.push...
       // console.log(JSON.stringify(config.resolve.fallback))
        config.resolve.fallback = {
            crypto: false,
            util: false,
            stream: false,
            ...config.resolve.fallback
        };  
        return config
    }

edited Jun 15, 2022 at 19:01

Jeff

4,16625 silver badges32 bronze badges

answered Feb 25, 2022 at 16:24

user2410689

Collectives™ on Stack Overflow

Webpack 5 Errors - Cannot Resolve 'crypto', 'http', and 'https' in ReactJS Project

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related