Webpack 5 Pollyfill Error

AlgoSDK
1

I posted this Issue on GitHub for a bug in PeraWallet Connect. However, the PeraWallet team has been unable to solve it. Maybe @Taylan can help.

The error is:

ERROR in ./node_modules/algosdk/dist/browser/algosdk.min.js 7206:55-72

Module not found: Error: Can't resolve 'crypto' in '/Users/fortiorb/Desktop/Programming/Connect/node_modules/algosdk/dist/browser

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 }

This purported fix does not work. This purported fix does not work.

One problem is I can’t find the path to: Desktop/Programming/Connect/node_modules/algosdk. This is strange because the algosdk should not be in the node_modules folder. So, it isn’t clear where this error is coming from, whether it is an AlgoSDK error, a PeraWalletConnect error, or a React error.

I am lost on how to resolve this bug, in large part because I don’t know what a polyfill is or why it is used. Ultimately, I’d appreciate any advice or guidance on what is causing this error and how to fix it.

2

Update

Issue reported on GitHub.

3

Solution

The solution is on StackOverFlow.

Add:
"crypto": require.resolve("crypto-browserify"),

In:
node_modules/react-scripts/config/webpack.config.js