CODEWITHSUNDEEP
node.jswebpackgatsbyweb3jspolyfills
Keith
Keith

Reputation: 61

Gatsby / Webpack Polyfill Issue

I am running a Gatsby3 site and like many, when I try to use certain web3 plugins I encounter Webpack 5 errors about missing Polyfills. I understand they no longer do them automatically and I must handle them myself.

After trying every solution I could find, this one seems like it should work, but just isn't for me. I am guessing I am doing something wrong / missing something.

This is what I added to Gatsby config, to handle the missing polyfills for "crypto" and "stream":

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

I do have crypto-browserify & stream-browserify installed.

Yet, same errors persist:

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: { "stream":
require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

Upvotes: 6

Views: 845

Answers (1)

rolzan
rolzan

Reputation: 71

I had the exact same problem.

Your config code is correct and it's what I used to solve my problem, by adding it inside gatsby-node.js in the root folder, then installed both npm packages.

Be sure to put the config code inside gatsby-node.js and not gatsby-config.js as what I did when I saw your question.

Upvotes: 4

Related Questions