Reading from "node:crypto" is not handled by webpack plugins

[barbalex]

In version 4.0.0, the import for crypto was changed from:

const crypto = require('crypto');

to:

import crypto from 'node:crypto';

See here.

I am surprised that it is not imported as:

import crypto from 'crypto';

The nodes docs (https://nodejs.org/api/crypto.html#crypto_class_hash) show this way for importing:

const { createHash } = await import('crypto');

There may be a good reason for importing node:crypto I don't know - I am a frontend dev, not using node.js very often. I don't even know what node:crypto really does and why it can be used in this way. It seems to explicitly declare to import the crypto module from node though.

Anyway, I ran into a problem that seems to stem from this way of importing:

My app uses gatsby. Gatsby recently changed from webpack v4 to webpack v5. When updating md5-hex from 3.0.1 to 4.0.0 I get this error when building the app:

ERROR #98123  WEBPACK

Generating SSR bundle failed

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.

File: node:crypto

After some searching I found that md5-hex causes this (I had no idea what dependency called node:crypto). Then I found that webpack had polyfilled for node until version 4, no more in version 5 (https://stackoverflow.com/a/67335037/712005). So I manually changed the webpack config in my app to polyfill for crypto by doing:

yarn add crypto-browserify

And adding in gatsby-node.js:

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      fallback: {
        crypto: require.resolve('crypto-browserify'),
      },
    },
  })
}

Unfortunately this does not solve the issue. I still get:

ERROR #98123  WEBPACK

Generating SSR bundle failed

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.

File: node:crypto

when building the app.

I even tried:

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      fallback: {
        'node:crypto': require.resolve('crypto-browserify'),
      },
    },
  })
}

But that does not work either.

Could it be that

import crypto from 'node:crypto';

prevents polyfilling for crypto?
Or is it simply that the node:crypto instead of crypto way of importing is not recognized by webpack?

If so that should be an issue for md5-hex as it says on the readme:
Works in the browser too, when used with a bundler like Webpack, Rollup, Browserify.

But probably I am just missing something obvious.

[perry-mitchell]

I know this is probably dead, but I'm encountering it now.. You can get around this, when using webpack at least, by using plugins:

plugins: [
    new webpack.NormalModuleReplacementPlugin(/node:/, (resource) => {
        resource.request = resource.request.replace(/^node:/, "");
    })
]

[ThanosDi]

Combining both answers for Gatsby I solved it by adding this to the gatsby-node.ts

export const onCreateWebpackConfig: GatsbyNode['onCreateWebpackConfig'] = async ({ actions}) => {
  actions.setWebpackConfig({
    plugins: [
      new webpack.NormalModuleReplacementPlugin(/node:/, (resource) => {
        resource.request = resource.request.replace(/^node:/, "");
      })
    ],
    resolve: {
      fallback: {
        crypto: false,
      },
    },
  })
}