title: Module not found: Error: Can't resolve 'crypto' in 'C:\
body: <p><strong>ERROR MESSAGE:</strong></p>
  <pre><code>Compiled with problems:X
  
  ERROR in ./node_modules/@solana/spl-name-service/dist/utils.js 16:17-34
  
  Module not found: Error: Can't resolve 'crypto' in 'C:\Users\...\node_modules\@solana\spl-name-service\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;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 }
  </code></pre>
  <p><strong>Where the problem started:</strong></p>
  <ul>
  <li>I tried using getParsedNftAccountsByOwner() from:
  <a href="https://github.com/NftEyez/sol-rayz" rel="nofollow noreferrer">https://github.com/NftEyez/sol-rayz</a></li>
  <li>Then, I got this error message.</li>
  </ul>
  <p><strong>My project:</strong></p>
  <ul>
  <li>getParsedNftAccountsByOwner()</li>
  <li>React, Typescript project</li>
  <li>Libraries used: @solana/web3.js <strong>|</strong> @nfteyez/sol-rayz</li>
  <li>webpack 5.67.0</li>
  </ul>
  <p><strong>Even though I was able to resolve these errors in a few minutes, the 'crypto' one is different:</strong></p>
  <p><em>Stream problem:</em></p>
  <pre><code>ERROR in ./node_modules/cipher-base/index.js 3:16-43
  
  Module not found: Error: Can't resolve 'stream' in 'C:\Users\...\node_modules\cipher-base'
  
  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;stream&quot;: require.resolve(&quot;stream-browserify&quot;) }'
      - install 'stream-browserify'
  If you don't want to include a polyfill, you can use an empty module like this:
      resolve.fallback: { &quot;stream&quot;: false }
  </code></pre>
  <p><em>assert problem:</em></p>
  <pre><code>ERROR in ./node_modules/@solana/spl-name-service/dist/utils.js 14:33-50
  
  Module not found: Error: Can't resolve 'assert' in 'C:\Users\...\node_modules\@solana\spl-name-service\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;assert&quot;: require.resolve(&quot;assert/&quot;) }'
      - install 'assert'
  If you don't want to include a polyfill, you can use an empty module like this:
      resolve.fallback: { &quot;assert&quot;: false }
  </code></pre>
  <p><strong>What I have done so far:</strong></p>
  <ol>
  <li><p>I tried performing the two suggestions from the error message, and it didn't work</p>
  </li>
  <li><p>I tried the first two solutions already:</p>
  <p>&quot;compilerOptions&quot;: {
  &quot;baseUrl&quot;: &quot;./&quot;,
  &quot;paths&quot;: {
  &quot;crypto&quot;: [
  &quot;node_modules/crypto-js&quot;
  ]
  }</p>
  </li>
  </ol>
  <p><a href="https://stackoverflow.com/questions/54162297/module-not-found-error-cant-resolve-crypto">Module not found: Error: Can&#39;t resolve &#39;crypto&#39;</a></p>
  <ol start="3">
  <li><p>I tried this solution:</p>
  <p>&quot;browser&quot;: {
  &quot;crypto&quot;: false
  }</p>
  </li>
  </ol>
  <p><a href="https://github.com/tensorflow/tfjs/issues/494#issuecomment-481636128" rel="nofollow noreferrer">https://github.com/tensorflow/tfjs/issues/494#issuecomment-481636128</a></p>
  <ol start="4">
  <li>I tried this solution: node-polyfill-webpack-plugin</li>
  </ol>
  <p><a href="https://stackoverflow.com/a/65556946/18007508">https://stackoverflow.com/a/65556946/18007508</a></p>
  <pre><code>const NodePolyfillPlugin = require(&quot;node-polyfill-webpack-plugin&quot;)
  module.exports = {
          // Other rules...
          plugins: [
              new NodePolyfillPlugin()
          ]
      } 
  </code></pre>
  <p><strong>My Code:</strong>
  <em>webpack.config.js</em></p>
  <pre><code>const HtmlWebpackPlugin = require(&quot;html-webpack-plugin&quot;);
  const MiniCssExtractPlugin = require(&quot;mini-css-extract-plugin&quot;);
  const NodePolyfillPlugin = require(&quot;node-polyfill-webpack-plugin&quot;)
  module.exports = {
    entry: &quot;./src/components/index.tsx&quot;,
    target: &quot;web&quot;,
    mode: &quot;development&quot;,
    output: {
      path: path.resolve(\__dirname, &quot;build&quot;),
      filename: &quot;bundle.js&quot;,
    },
    resolve: {
      extensions: [&quot;.js&quot;, &quot;.jsx&quot;, &quot;.json&quot;, &quot;.ts&quot;, &quot;.tsx&quot;],
      fallback: {
        &quot;crypto&quot;:require.resolve('crypto-browserify') ,
      } 
    },
    module: {
      rules: [
        {
          test: /\.(ts|tsx)$/,
          loader: &quot;awesome-typescript-loader&quot;,
        },
        {
          enforce: &quot;pre&quot;,
          test: /\.js$/,
          loader: &quot;source-map-loader&quot;,
        },
        {
          test: /\.css$/,
          loader: &quot;css-loader&quot;,
        },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: path.resolve(\__dirname, &quot;src&quot;, &quot;components&quot;, &quot;index.html&quot;),
      }),
      new MiniCssExtractPlugin({
        filename: &quot;./src/yourfile.css&quot;,
      }),
      new NodePolyfillPlugin()
    ],
  };
  </code></pre>
  <p><em>package.json</em></p>
  <pre><code>{
    &quot;name&quot;: &quot;my-app&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@headlessui/react&quot;: &quot;^1.4.3&quot;,
      &quot;@heroicons/react&quot;: &quot;^1.0.5&quot;,
      &quot;@nfteyez/sol-rayz&quot;: &quot;^0.9.1&quot;,
      &quot;@nfteyez/sol-rayz-react&quot;: &quot;^0.9.1&quot;,
      &quot;@solana/spl-name-service&quot;: &quot;^0.1.3&quot;,
      &quot;@solana/wallet-adapter-base&quot;: &quot;^0.9.2&quot;,
      &quot;@solana/wallet-adapter-react&quot;: &quot;^0.15.2&quot;,
      &quot;@solana/wallet-adapter-react-ui&quot;: &quot;^0.9.4&quot;,
      &quot;@solana/wallet-adapter-wallets&quot;: &quot;^0.14.2&quot;,
      &quot;@solana/web3.js&quot;: &quot;^1.32.0&quot;,
      &quot;@testing-library/jest-dom&quot;: &quot;^5.16.1&quot;,
      &quot;@testing-library/react&quot;: &quot;^12.1.2&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^13.5.0&quot;,
      &quot;@types/jest&quot;: &quot;^27.4.0&quot;,
      &quot;@types/node&quot;: &quot;^16.11.19&quot;,
      &quot;assert&quot;: &quot;^2.0.0&quot;,
      &quot;axios&quot;: &quot;^0.25.0&quot;,
      &quot;browser&quot;: &quot;^0.2.6&quot;,
      &quot;crypto&quot;: &quot;^1.0.1&quot;,
      &quot;crypto-browserify&quot;: &quot;^3.12.0&quot;,
      &quot;crypto-js&quot;: &quot;^4.1.1&quot;,
      &quot;install&quot;: &quot;^0.13.0&quot;,
      &quot;node-polyfill-webpack-plugin&quot;: &quot;^1.1.4&quot;,
      &quot;react&quot;: &quot;^17.0.2&quot;,
      &quot;react-dom&quot;: &quot;^17.0.2&quot;,
      &quot;react-redux&quot;: &quot;^7.2.6&quot;,
      &quot;react-router&quot;: &quot;^6.2.1&quot;,
      &quot;react-router-dom&quot;: &quot;^6.2.1&quot;,
      &quot;react-scripts&quot;: &quot;5.0.0&quot;,
      &quot;redux&quot;: &quot;^4.1.2&quot;,
      &quot;redux-thunk&quot;: &quot;^2.4.1&quot;,
      &quot;store&quot;: &quot;^2.0.12&quot;,
      &quot;stream&quot;: &quot;^0.0.2&quot;,
      &quot;stream-browserify&quot;: &quot;^3.0.0&quot;,
      &quot;styled-components&quot;: &quot;^5.3.3&quot;,
      &quot;three&quot;: &quot;^0.136.0&quot;,
      &quot;web-vitals&quot;: &quot;^2.1.3&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;react-scripts start&quot;,
      &quot;build&quot;: &quot;react-scripts build&quot;,
      &quot;test&quot;: &quot;react-scripts test&quot;,
      &quot;eject&quot;: &quot;react-scripts eject&quot;
    },
    &quot;eslintConfig&quot;: {
      &quot;extends&quot;: [
        &quot;react-app&quot;,
        &quot;react-app/jest&quot;
      ]
    },
    &quot;browserslist&quot;: {
      &quot;production&quot;: [
        &quot;&gt;0.2%&quot;,
        &quot;not dead&quot;,
        &quot;not op_mini all&quot;
      ],
      &quot;development&quot;: [
        &quot;last 1 chrome version&quot;,
        &quot;last 1 firefox version&quot;,
        &quot;last 1 safari version&quot;
      ]
    },
    &quot;devDependencies&quot;: {
      &quot;@types/react&quot;: &quot;^17.0.38&quot;,
      &quot;@types/react-dom&quot;: &quot;^17.0.11&quot;,
      &quot;@types/react-redux&quot;: &quot;^7.1.22&quot;,
      &quot;@types/react-router-dom&quot;: &quot;^5.3.2&quot;,
      &quot;@types/styled-components&quot;: &quot;^5.1.20&quot;,
      &quot;autoprefixer&quot;: &quot;^10.4.2&quot;,
      &quot;awesome-typescript-loader&quot;: &quot;^5.2.1&quot;,
      &quot;css-loader&quot;: &quot;^6.5.1&quot;,
      &quot;html-webpack-plugin&quot;: &quot;^5.5.0&quot;,
      &quot;mini-css-extract-plugin&quot;: &quot;^2.5.0&quot;,
      &quot;postcss&quot;: &quot;^8.4.5&quot;,
      &quot;source-map-loader&quot;: &quot;^3.0.1&quot;,
      &quot;tailwindcss&quot;: &quot;^3.0.15&quot;,
      &quot;typescript&quot;: &quot;^4.5.4&quot;,
      &quot;webpack-dev-server&quot;: &quot;^4.7.3&quot;
    }
  }
  </code></pre>