Broken crypto dependency in webpack 5

I’m using use-shopping-cart in a gatsby project. The current version of gatsby (3.0) uses webpack 5. Webpack 5 fails on build with use-shopping-cart due to the crypto dependency (error msg below). It looks like crypto is deprecated: crypto on npm. I get the error with both the current stable version of use-shopping-cart on npm (2.4.3) and the latest verstion (3.0.0-beta3). Any suggestions?

Can't resolve 'crypto' in '[PROJECT_DIR]/node_modules/use-shopping-cart/dist'

If you're trying to use a package make sure that 'crypto' is installed. If you're trying to use a local
file make sure that the path is correct.

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 }

File: node_modules/use-shopping-cart/dist/index.es.js:19:0

[andria-dev]

If Webpack 5 used in Gatsby 3 still complains after we publish the uuid and rollup alias changes — which we haven’t yet — then I would say that the following two links will probably solve your problem.

Polyfilling Node’s Core APIs

https://github.com/Richienb/node-polyfill-webpack-plugin

The node-polyfill-webpack-plugin package was specifically introduced to polyfill the Node APIs — i.e crypto — that Webpack 5 stopped polyfilling by default.

Adding a Custom Webpack Config to Gatsby

https://www.gatsbyjs.com/docs/how-to/custom-configuration/add-custom-webpack-config/

Well, now you know how to polyfill the right things but how do you do that in a Gatsby 3 project? In the gatsby-node.js file, you should be able to do the following.

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({ plugins: [new NodePolyfillPlugin()] })
}

If this does not work for you, please let us know.

[felipesousa]

thanks a lot @ChrisBrownie55!