gatsby.js "Buffer is not defined" Web3 WalletConnect

Question

Trying to add WalletConnect standalone client in a gatsby project. web3modal crashes when WalletConnect is a provider with the following error:

Error in function typedarrayToBuffer in ./node_modules/@walletconnect/encoding/node_modules/typedarray-to-buffer/index.js:15 Buffer is not defined

even after all packages have been added with npm install

Buffer obviously needs a different solution than crypto so got no idea why your question is marked duplicate, the answer solved my problem! — Coffeeholic, Dec 11 '22 at 16:18

score 2 · Answer 1 · answered Jul 20 '22 at 18:00

SOLVED: This happens because only Webpack versions < 5 used to include polyfills for Node.js core modules by default, whereas latest versions do not. If you're using a Webpack version > 5 you'll need to add this manually to your Webpack config.

In a gatsby.js project,in your gatsby-node.js file, add the following:

const webpack = require("webpack");

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
      plugins: [
          new webpack.ProvidePlugin({
              Buffer: [require.resolve("buffer/"), "Buffer"],
          }),
      ],
      resolve: {
          fallback: {
              "crypto": false,
              "stream": require.resolve("stream-browserify"),
              "assert": false,
              "util": false,
              "http": false,
              "https": false,
              "os": false
          },
      },
  })
}

gatsby.js "Buffer is not defined" Web3 WalletConnect

1 Answers1