Webpack 5 Errors - Cannot Resolve 'crypto', 'http', and 'https' in Rea-CodePudding

Background

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? Thank you!

CodePudding user response：

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

CodePudding user response：

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.