Error: Can't resolve 'crypto'

[Nyazuki]

Describe the bug Error occurs when building React project locally.

...

WARNING in ./node_modules/encrypt-storage/dist/index.js 2:104-121
Module not found: Error: Can't resolve 'crypto' in '/Users/foobar/workspace/ui-react/node_modules/encrypt-storage/dist'

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 }
 @ ./config/amplify.ts 1:0-49 3:27-41
 @ ./src/App.tsx 6:0-42 21:18-27
 @ ./src/index.tsx 5:0-24 14:118-121

 ...

To Reproduce Steps to reproduce the behavior: $ npm run build

Expected behavior Application build with no errors.

Desktop (please complete the following information):

• OS: macOS Big Sur 11.6
• Browser: n/a
• Version: "encrypt-storage": "^2.2.5"

[Nyazuki]

In fact, found that the build did complete, it looks like it is an error message inside of a WARNING... which is kinda weird... I still think this is a bug, and hope to see this error(warning...) message disappear for the future builds.

[michelonsouza]

@Nyazuki what's your CRA or NextJS version?

[Nyazuki]

@Nyazuki what's your CRA or NextJS version?

I dont use CRA or NextJS, the project ejected with customized configs, but it is running on node 14.18.1 webpack ^5.19.0 react ^17.0.1 "terser-webpack-plugin": "5.1.1", "ts-loader": "^8.0.14", "ts-node": "^9.1.1", "tslib": "^2.1.0", "typescript": "^4.1.3", "file-loader": "^6.2.0", "url-loader": "^4.1.1",

[Nyazuki]

Tried adding: resolve: { fallback: { crypto: false } } to webpack config will mute the warning/error, but not sure why and how did it work.

[michelonsouza]

I update the version with this config in webpack. Try the version 2.2.6

[Nyazuki]

I update the version with this config in webpack. Try the version 2.2.6

Same result with 2.2.6... still showing that warning

[michelonsouza]

I Will search a way to solve this problem.

[lopesboa]

Hi @Nyazuki , in webpack 5 have alot of change, u can try Instead of using Webpack 5, an alternative solution downgrade the[email protected] and [email protected] version of your project "if u r not using module federation". find out more in this issue: https://github.com/facebook/create-react-app/issues/11756

[michelonsouza]

Thanks for this @lopesboa

[Nyazuki]

@lopesboa thanks for the tip. Unfortunately, due to other lib we are using(e.g. aws-amplify etc.) downgrade is not an option for us... I will just do the fallback trick on webpack config for now. However, I think webpack v5 has been for a while now, and hopefully this issue can be resolved here, or maybe they need to do something, idk.

[Nyazuki]

After 7.5 months and now working on another upgrade for my project dependencies, the issue still exist with new settings as follows: node: v16.15.1 "webpack": "^5.73.0" "encrypt-storage": "^2.2.10" "ts-loader": "^9.3.1", "ts-node": "^10.9.1", "tslib": "^2.4.0", "typescript": "^4.7.4"

After a few more diggings, and according this comment: https://stackoverflow.com/a/66306663 Set target: 'node' did suppress the warning - Can't resolve 'crypto', however, obviously, my project is targeted for web not node, and once I do have target: node in webpack config, it causes other issues e.g. Can't resolve 'encoding' in '/Users/foobar/workspace/ui-react/node_modules/node-fetch/lib'

I think the issue here is that when webpack is defaulting its target to web, it does not automatically includes libs like crypto from node, therefore you need to manually add it in or turn it off to suppress the warnings.

In webpack config:

resolve: {
  fallback: {
    crypto: require.resolve('crypto-js') // or "false" to turn off
  }
}

The question now is - Why encrypt-storage is requesting for crypto lib to be exist for projects uses encrypt-storage? I suspect it is because of this line: https://github.com/michelonsouza/encrypt-storage/blob/8723d62de69e7f9327a1881533064136dde68078/webpack.config.js#L15

[michelonsouza]

I'm sorry about that @Nyazuki, I've been out for a while.

After some research I managed to solve it with fallbacks and a recently released plugin node-polyfill-webpack-plugin.

I hope you forgive me for the delay and I ask that you use latest version of the package to assess whether the problem has been resolved.

Here for me with react-scripts 5.0.1 and vite-js@latest it worked.

I'll wait for your OK to close the issue.

[michelonsouza]

I will close the issue as it appears to have resolved it, as discussed with other users.

At any time open a new issue with the same or another bug.

Thank you very much @Nyazuki .