Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add crypto-browserify to Gatsby project

I want to add use-shopping-cart (https://useshoppingcart.com/) 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!

like image 864
Sanne Wintrén Avatar asked Apr 30 '21 12:04

Sanne Wintrén


People also ask

What is Crypto Browserify?

A port of node's crypto module to the browser. The goal of this module is to reimplement node's crypto module, in pure javascript so that it can run in the browser. Here is the subset that is currently implemented: createHash (sha1, sha224, sha256, sha384, sha512, md5, rmd160)

Does Gatsby use Webpack 5?

For example, Gatsby ships with its own webpack. config. js file that supports global CSS files, component-scoped CSS modules, and CSS-in-JS. You can also use webpack to optimize how CSS and JavaScript are delivered to the browser.


Video Answer


1 Answers

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
      },
    },
  })
}
like image 146
Ferran Buireu Avatar answered Oct 24 '22 04:10

Ferran Buireu