Webpack ERROR in node:crypto Module build failed: UnhandledSchemeError: Reading from "node:crypto"

Question

I am attempting to update some older code to eliminate warnings. I have upgraded some code that uses the 'crypto' module. However, webpack 5.88.2 does not recognize the new syntax. My new import looks like this:

const crypto = await import('node:crypto');

The complete error looks like this. It suggests that I may need another plugin, but I can't find one.

ERROR in node:crypto
Module build failed: UnhandledSchemeError: Reading from "node:crypto" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.
    at C:\xxxxx\functions\auth-check\node_modules\webpack\lib\NormalModule.js:838:25        
    at Hook.eval [as callAsync] (eval at create (C:\xxxxx\functions\auth-check\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\xxxxx\functions\auth-check\node_modules\tapable\lib\Hook.js:18:14)
    at Object.processResource (C:\xxxxx\functions\auth-check\node_modules\webpack\lib\NormalModule.js:835:8)
    at processResource (C:\xxxxx\node_modules\loader-runner\lib\LoaderRunner.js:220:11)
    at iteratePitchingLoaders (C:\xxxxx\functions\auth-check\node_modules\loader-runner\lib\LoaderRunner.js:171:10)
    at runLoaders (C:\xxxxx\node_modules\loader-runner\lib\LoaderRunner.js:398:2)
    at NormalModule._doBuild (C:\xxxxx\auth-check\node_modules\webpack\lib\NormalModule.js:825:3)
    at NormalModule.build (C:\xxxxx\functions\auth-check\node_modules\webpack\lib\NormalModule.js:969:15)
    at C:\xxxxx\functions\auth-check\node_modules\webpack\lib\Compilation.js:1377:12        
 @ ./src/index.ts 6:21-42

webpack 5.88.2 compiled with 1 error in 2790 ms

Answer 1

You should change node:crypto to node/crypto

Answer 2

I came across the above error on my project and this is the command to fix the error.

npm install stream-browserify crypto-browserify process

In case you are working on a web5 using next project this is the link for more support.

https://developer.tbd.website/docs/web5/build/frameworks/next/

Answer 3

Install the packages first

npm i stream-browserify crypto-browserify

and then make the following changes to your next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,

  webpack: (config, { isServer, buildId, dev, webpack }) => {
    if (!isServer) {
      config.resolve.fallback = {
        ...config.resolve.fallback,
        stream: require.resolve('stream-browserify'),
        crypto: require.resolve('crypto-browserify'),
      };

      config.plugins.push(
        new webpack.ProvidePlugin({
          process: 'process/browser',
        }),
        new webpack.NormalModuleReplacementPlugin(
          /node:crypto/,
          (resource) => {
            resource.request = resource.request.replace(/^node:/, '');
          }
        )
      );
    }
    return config;
  },
};

module.exports = nextConfig;

Answer 4

The question is, do you want crypto to be included into the client bundle.

If the answer is YES, then the use of *-browserify libs is advised.

If NO, then you can import the module by its normal name crypto, and add this to your package.json file:

{
  ...
  "browser": {
    "crypto": false
  }
  ...
}

The result is, webpack will not even attempt to include this module into any of your client bundles.