Webpack < 5 polyfill problem when using @solana/wallet-adapter on [email protected]

Question

I am trying to use @solana/wallet-adapter based on https://github.com/solana-labs/wallet-adapter. However, I've got this error (2 images below). I've tried to install [email protected] and [email protected] but the error still there. I'm using [email protected]. How can I fix this or any recommend for alternative solution. Thank you!

Answer 1

To understand this issue, Webpack 4, which is used by Create React App 4, doesn't handle ESM imports well. And Webpack 5 does, but it doesn't polyfill things you need by default.

But here's the starter project, which uses CRA5, Webpack 5, and react-app-rewired, to get things working. You can see in the config how it includes the polyfills you need.

Answer 2

Fought with this issue a lot during our start as well. We are using CRA5, Webpack 5, and react-app-rewired. Webpack 5 no longer polyfills.

Our config-overrides.js:

const webpack = require('webpack')
module.exports = function override(config) {
    const fallback = config.resolve.fallback || {}
    Object.assign(fallback, {
        crypto: require.resolve('crypto-browserify'),
        stream: require.resolve('stream-browserify'),
        assert: require.resolve('assert'),
        http: require.resolve('stream-http'),
        https: require.resolve('https-browserify'),
        os: require.resolve('os-browserify'),
        url: require.resolve('url'),
    })
    config.module.rules.push({
        test: /\.m?js/,
        resolve: {
            fullySpecified: false
        }
    })
    config.resolve.fallback = fallback
    config.plugins = (config.plugins || []).concat([
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer'],
        }),
    ])
    return config
}

This is just an example to get reference so you can get yours working.