Module not found: Error: Can't resolve 'crypto' with Webpack

Describe the bug This bug appears when trying to build an app using @aws-amplify/auth with Webpack 5 because Webpack 5 does not include node.js core modules by default anymore.

To Reproduce Steps to reproduce the behavior:

1. Create a React project with Webpack 5
2. Install @aws-amplify/auth v3.4.11
3. Start a build
4. See error

Expected behavior The polyffil should be included 🤔

Screenshots

WARNING in ./node_modules/amazon-cognito-identity-js/es/utils/cryptoSecureRandomInt.js 47:13-30
Module not found: Error: Can't resolve 'crypto' in '/path/to/my/project/node_modules/amazon-cognito-identity-js/es/utils'

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 }
 @ ./node_modules/amazon-cognito-identity-js/es/utils/WordArray.js 4:0-60 46:17-38
 @ ./node_modules/amazon-cognito-identity-js/es/AuthenticationHelper.js 29:0-42 32:25-34
 @ ./node_modules/amazon-cognito-identity-js/es/index.js 18:0-73 18:0-73
 @ ./node_modules/@aws-amplify/auth/lib-esm/index.js 15:0-99 21:0-122 21:0-122 21:0-122

Additional context See https://webpack.js.org/migrate/5/

[acchou]

@harrysolovay Maybe this is an issue caused by a change to webpack 5, but the fact remains that @aws-amplify/auth doesn’t work without some polyfills… or does it? At a minimum that needs clarification.

The question is: is @aws-amplify/auth supported in browser use cases? And if so, how should it be packaged?

[harrysolovay]

This appears to be a Webpack issue. I’d recommend that you file an issue in the Webpack repo.

Resolving, as this is unrelated to AmplifyJS.