Error: Can't resolve 'crypto' in '@otplib/plugin-crypto'

[Tundak]

Getting issue with Angular project while using it.

./node_modules/@otplib/plugin-crypto/index.js:14:29-46 - Error: Module not found: Error: Can't resolve 'crypto' in '/project/node_modules/@otplib/plugin-crypto'

Angular Info:

Angular CLI: 12.0.1
Node: 14.15.1
Package Manager: yarn 1.22.5
OS: linux x64

Angular: 12.0.1
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.1
@angular-devkit/build-angular   12.0.1
@angular-devkit/core            12.0.1
@angular-devkit/schematics      12.0.1
@schematics/angular             12.0.1
rxjs                            6.6.7
typescript                      4.2.4

[f1ght4fun]

Any feedback on this!?

[Randall Meeker]

Not to pile on, getting this too w/ my angular setup. I'm on angular 11 though.

[Nathan Huebner]

Any progress on this? Trying to use it in a React project. Looked promising!

Module not found: Error: Can't resolve 'crypto' in '/Users/user/dev/www/mfa-auth-app/current/head/node_modules/@otplib/plugin-crypto'
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 }

[Nathan Huebner]

Downgrading react-scripts to 4.0.3 resolved my issue.

[Andres Mestra]

They can solve by adding this configuration to the webpack

module.exports = {
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
    alias: {
      crypto: require.resolve('crypto-browserify'),
      stream: require.resolve('stream-browserify'),
    },
  },
}

Remember install the polyfill ( according to your need )

npm install crypto-browserify
npm install stream-browserify

[MrRaines]

@andres-mestra How can i edit this configuration? where do i find the webpack config?

[Andres Mestra]

Hello, excuse me response late, on my case the implement in Electronjs, then the configuration you place them root folder project in the file webpack.config.js, I think in Angular is the same