Webpack 5 Pollyfill Error in SDK

Subject of the issue

I originally described the Issue in the Forum. I am now getting the same error working on another application, so I wanted to report it here to see if there may be a known fix for the bug.

Your environment

I am working in a react application where I am importing the algosdk and getting an error in node_modules/algosdk/dist/browser. Specifically, the error is coming from algosdk.min.js but when I searched in the file it is unreadable code. So, I am not sure what the file is or how to proceed.

Steps to reproduce

1. cd react-app
2. npm start

Expected behavior

Expected behavior is that the application functions as expected without the error. The application is functionally performing as expected on a local server. However, the error is obnoxiously reported by react and I would like to resolve the issue. I am not sure what is causing the problem because sometimes I get the error and sometimes I don’t. I tried changing the node_modules out to another node_modules from an application that was not producing the error, but it did not resolve the issue.

Actual behavior

ERROR in ./node_modules/algosdk/dist/browser/algosdk.min.js 7206:55-72
Module not found: Error: Can't resolve 'crypto' in '/Users/Programming/Game/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 }

webpack compiled with 1 error and 66 warnings

Thanks in advance for advice or suggestions.

[jasonpaulos]

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

Installing and using crypto-browserify will cause require("crypto") to resolve to require("crypto-browserify")

  resolve: {
    fallback: {
      crypto: false, // do not include a polyfill for crypto
    },

And setting the fallback to false will cause require("crypto") to resolve to false (or maybe null/undefined, I’m not too sure).

The difference is really whether you actually need a replacement for the crypto module or not. I expect both will work, but the simplest solution is the second.

[jasonpaulos]

Unfortunately the Module not found: Error: Can't resolve 'crypto' error is because of one of our dependencies, tweetnacl-js.

I gave more context in this comment: https://github.com/algorand/js-algorand-sdk/issues/643#issuecomment-1241268534