I want to add use-shopping-cart (/) to my Gatsby project. When I try to use it I get this error:

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 }

How can I add crypto-browserify to gatsby? as a plugin inside of gatsby-config.js?

Thanks!

I want to add use-shopping-cart (https://useshoppingcart./) to my Gatsby project. When I try to use it I get this error:

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 }

How can I add crypto-browserify to gatsby? as a plugin inside of gatsby-config.js?

Thanks!

• javascript
• reactjs
• webpack
• stripe-payments
• gatsby

1 Answer 1

This kind of issue (BREAKING CHANGE: webpack < 5 used to include polyfills for node.js...) relies on the fact that webpack has removed polyfills in their new v5 version, which is a needed dependency of use-shopping-cart.

It should be fixed by installing crypto-browserify (by npm i crypto-browserify) and adding the following fallback to webpack's overriding configuration, in your gatsby-node.js, onCreateWebpackConfig API should work:

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

Alternatively, if you don't want to include a polyfill, you can use an empty module like this:

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
   resolve: {
      fallback: {
        "crypto": false
      },
    },
  })
}