title: Webpack 5 Errors - Cannot Resolve 'crypto', 'http', and 'https' in ReactJS Project
body: <p>I have created a new React project using <code>npx create-react-app client</code> and have encountered some issues with Webpack 5. Originally, I had errors with <code>assert</code>, <code>os</code>, and <code>stream</code>, but have fixed them by installing them and including them in <code>webpack.config.js</code>. The file is located in the <code>client/src</code> folders.</p>
  <p>This is what the errors look like:</p>
  <pre><code>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 &lt; 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: { &quot;crypto&quot;: require.resolve(&quot;crypto-browserify&quot;) }'
          - install 'crypto-browserify'
      If you don't want to include a polyfill, you can use an empty module like this:
          resolve.fallback: { &quot;crypto&quot;: 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 &lt; 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: { &quot;http&quot;: require.resolve(&quot;stream-http&quot;) }'
          - install 'stream-http'
      If you don't want to include a polyfill, you can use an empty module like this:
          resolve.fallback: { &quot;http&quot;: 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 &lt; 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: { &quot;https&quot;: require.resolve(&quot;https-browserify&quot;) }'
          - install 'https-browserify'
      If you don't want to include a polyfill, you can use an empty module like this:
          resolve.fallback: { &quot;https&quot;: false }
  </code></pre>
  <p><em><strong>Code</strong></em></p>
  <p>This is what my <code>webpack.config.js</code> file looks like right now.</p>
  <pre><code>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'),
      },
    },
  };
  </code></pre>
  <p>Below is my <code>package.json</code> file.</p>
  <pre><code>{
    &quot;dependencies&quot;: {
      &quot;assert&quot;: &quot;^2.0.0&quot;,
      &quot;crypto-browserify&quot;: &quot;^3.12.0&quot;,
      &quot;dotenv&quot;: &quot;^10.0.0&quot;,
      &quot;https-browserify&quot;: &quot;^1.0.0&quot;,
      &quot;os&quot;: &quot;^0.1.2&quot;,
      &quot;stream&quot;: &quot;^0.0.2&quot;,
      &quot;stream-http&quot;: &quot;^3.2.0&quot;
    }
  }
  </code></pre>
  <p>As seen from the above, I have installed the suggested packages from the errors (<code>crypto-browserify</code>, <code>stream-http</code>, and <code>https-browserify</code>) and have included them in the <code>webpack.config.js</code> file. However, the errors still persist.</p>
  <p>How do I solve this?</p>