How to setup polyfill for crypto package?

[MrPhyaeSoneThwim]

I want to integrate my Gatsby project with solana wallet adapter. I've already installed solana related packages according to the documentation.

yarn add @solana/wallet-adapter-wallets
@solana/wallet-adapter-base
@solana/wallet-adapter-react
@solana/wallet-adapter-react-ui
@solana/web3.js

But when I start the project, the following error raised

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 }

You can see detail about error in the following picture

[jordaaash]

Thanks for the report, is this something you were able to workaround by adding the fallback? This is something it would help to add documentation for @ https://github.com/solana-labs/wallet-adapter/blob/master/FAQ.md#can-i-use-this-with-___

[ibrica]

Removing polyfills for crypto (Torus wallet dependency I believe) works for me. In webpack.config.js should be added:

resolve: {
        fallback: {
            "crypto": false,
        } 
  }

[MrPhyaeSoneThwim]

Thanks jordansexton and ibrica. I've already solved the issues. I am using Gatsby so I used gatsby-node.js file and configured the deprecated packages manually by installing some packages..

And the code inside gatsby-node.js file just like this...

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    plugins: [
      new webpack.ProvidePlugin({
        process: "process/browser",
      }),
      new webpack.ProvidePlugin({
        Buffer: [require.resolve("buffer/"), "Buffer"],
      }),
    ],
    resolve: {
      fallback: {
        crypto: require.resolve("crypto-browserify"),
        stream: require.resolve("stream-browserify"),
      },
    },
  })
} 

[jordaaash]

Nice, thank you both for posting your workarounds. I'll update the FAQ.

I think the fix @ibrica made is slightly better in principle, since it doesn't polyfill the Node crypto package that shouldn't be used in the browser anyway.

However, Buffer is used in the browser by Ledger at least, so it's good to polyfill that.

[jordaaash]

Fixed by 81e80d5 / added to https://github.com/solana-labs/wallet-adapter/blob/master/FAQ.md#webpack--gatsby