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

[gautierrollin]

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/

[swyxio]

reminds me of https://blog.sindresorhus.com/webpack-5-headache-b6ac24973bf1

[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.

[swyxio]

@harrysolovay it is a webpack issue, and it is unfortunate, but also inevitable that we will be pressured into polyfilling the modules we need. you'll just see this same issue opened more and more as webpack 5 rolls out and we dont have a choice but to deal with it.

[hisham]

I just updated to angular 11, and I'm seeing this warning even though it's running webpack 4.44.2.

So is 'crypto' needed by amazon-cognito-identity-js in the browser? Should I polyfill this or ignore this warning?

[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?

[cybercussion]

So with Angular is this solved by creating yet another config.json file?

[dorontal]

I am also blocked by this issue. I believe this is an Angular 12 issue that shows up with Webpack 5.

Previous versions of Angular do not use Webpack 5 and for those versions of Angular, the following fix has worked for me (see Tarique Ahmed's answer here): https://stackoverflow.com/questions/54162297/module-not-found-error-cant-resolve-crypto/54162447

But ever since upgrading to Angular 12, which uses Webpack 5, I get the same issue reported here.

The following issue, with Angular, sheds a light and points that Angular is currently blocking crypto in the browser builds and this is why we cannot use angular together with @aws-amplify/auth currently:
angular/angular-cli#1548

See also: https://blog.sindresorhus.com/webpack-5-headache-b6ac24973bf1

I am hoping that the Amplify team can help convince the Angular team to make those two libraries work together and that somebody posts a workaround in the meantime - if I find a workaround, will post it here. There is a workaround, which is to create a custom webpack config - as described - but I am hopeful for a less painful workaround.

See also: #7260

The best temporary workaround I've found thus far is, unfortunately, to go back to Angular version 11.

[cybercussion]

This may help since I went thru it - #4387