Can't resolve 'crypto' in react-oauth2-pkce

[smurfolan]

I have a React.js application which is part of an oAuth2 architecture and in order to get a token it uses Authorization Code + PKCE flow as explained here.

The issue is that when I try to run the app npm start I get the following error:

I tried with the suggested approach at many places to add the following in my package.json after devDependencies:

"browser": {
    "crypto": false
  }

but I still have the same issue. I am using Node.js 14.0.0

[t-knapp]

With webpack 5 you have to make "crypto" and "stream" available in the browser.

npm install stream-browserify crypto-browserify

Adjust resolving in your webpack config.

[...]
resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    fallback: {
        crypto: require.resolve('crypto-browserify'),
        stream: require.resolve('stream-browserify'),
    }
}

Works on Node 14.x and 16.x

[mdizdare]

My team received the same error late last week, which was after the fix for this issue was identified here. Is there a timeline during which this fix will be incorporated into the npm package to install other components as well? Thanks.

[shiv0808]

Hi @gardner @t-knapp Question...May i know the exact file name(with extension) where we have to add this webpack config? Also can you please incorporate the fixes for the above issue into the NPM package as i am currently working on a project where this issue is becoming a roadblock for me...Thanks!!!!

[t-knapp]

Hi @shiv0808,

from my package.json

"dependencies": {
  ...
  "crypto-browserify": "^3.12.0",
  "stream-browserify": "^3.0.0",
  ...
}

from my webpack.js config file

module.exports = (env, argv) => ({
    mode: ...,
    plugins: [...],
    module: {
        rules: [...]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
        fallback: {
            crypto: require.resolve('crypto-browserify'),
            stream: require.resolve('stream-browserify'),
        }
    }
});

[shiv0808]

Hi @shiv0808,

from my package.json

"dependencies": {
  ...
  "crypto-browserify": "^3.12.0",
  "stream-browserify": "^3.0.0",
  ...
}

from my webpack.js config file

module.exports = (env, argv) => ({
    mode: ...,
    plugins: [...],
    module: {
        rules: [...]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
        fallback: {
            crypto: require.resolve('crypto-browserify'),
            stream: require.resolve('stream-browserify'),
        }
    }
});

Hi @t-knapp , i am really not sure which webpack.js you are referring to.I have 2 of them in my application:

1. node_modules\webpack\lib
2. node_modules\webpack\bin

do let me know which one are u referring to..Thanks!!

[t-knapp]

Please do not change some code in node_modules folders ever. This is where your depenencies are installed to.

Please read about how to configure webpack in a prober way: https://webpack.js.org/configuration/

[shiv0808]

Please do not change some code in node_modules folders ever. This is where your depenencies are installed to.

Please read about how to configure webpack in a prober way: https://webpack.js.org/configuration/

Thanks you very much for your effort @t-knapp :) ✌️ ..I have created a new file webpack.config.js as mentioned under that link and added the fallback as you mentioned above. But unfortunately the same error still persists for me...Not sure if my application is able to recognize the webpack.config.js file. Also need to ask about this line of code:
proxy:
{ // proxy URLs to backend development server
'/api': 'http://localhost:3000'
},

If you could let me know , do we have to change this proxy in any way that it fits to my application as well.Just sharing whole error in case it makes you understand better:

**_ERROR in ./node_modules/react-oauth2-pkce/dist/index.modern.js 2:0-49

Module not found: Error: Can't resolve 'crypto' in 'C:\Users\ssriv112\react-sso-code\node_modules\react-oauth2-pkce\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 }
resolve 'crypto' in 'C:\Users\ssriv112\react-sso-code\node_modules\react-oauth2-pkce\dist'
Parsed request is a module
using description file: C:\Users\ssriv112\react-sso-code\node_modules\react-oauth2-pkce\package.json (relative path: ./dist)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
C:\Users\ssriv112\react-sso-code\node_modules\react-oauth2-pkce\dist\node_modules doesn't exist or is not a directory
C:\Users\ssriv112\react-sso-code\node_modules\react-oauth2-pkce\node_modules doesn't exist or is not a directory
C:\Users\ssriv112\react-sso-code\node_modules\node_modules doesn't exist or is not a directory
looking for modules in C:\Users\ssriv112\react-sso-code\node_modules
single file module
using description file: C:\Users\ssriv112\react-sso-code\package.json (relative path: ./node_modules/crypto)
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\Users\ssriv112\react-sso-code\node_modules\crypto doesn't exist
.web.mjs
Field 'browser' doesn't contain a valid alias configuration
C:\Users\ssriv112\react-sso-code\node_modules\crypto.web.mjs doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
C:\Users\ssriv112\react-sso-code\node_modules\crypto.mjs doesn't exist
.web.js
Field 'browser' doesn't contain a valid alias configuration
C:\Users\ssriv112\react-sso-code\node_modules\crypto.web.js doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
C:\Users\ssriv112\react-sso-code\node_modules\crypto.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
C:\Users\ssriv112\react-sso-code\node_modules\crypto.json doesn't exist
.web.jsx
Field 'browser' doesn't contain a valid alias configuration
C:\Users\ssriv112\react-sso-code\node_modules\crypto.web.jsx doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
C:\Users\ssriv112\react-sso-code\node_modules\crypto.jsx doesn't exist
C:\Users\ssriv112\react-sso-code\node_modules\crypto doesn't exist
looking for modules in C:\Users\ssriv112\node_modules
single file module
No description file found in C:\Users\ssriv112\node_modules or above
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\Users\ssriv112\node_modules\crypto doesn't exist
.web.mjs
Field 'browser' doesn't contain a valid alias configuration
C:\Users\ssriv112\node_modules\crypto.web.mjs doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
C:\Users\ssriv112\node_modules\crypto.mjs doesn't exist
.web.js
Field 'browser' doesn't contain a valid alias configuration
C:\Users\ssriv112\node_modules\crypto.web.js doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
C:\Users\ssriv112\node_modules\crypto.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
C:\Users\ssriv112\node_modules\crypto.json doesn't exist
.web.jsx
Field 'browser' doesn't contain a valid alias configuration
C:\Users\ssriv112\node_modules\crypto.web.jsx doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
C:\Users\ssriv112\node_modules\crypto.jsx doesn't exist
C:\Users\ssriv112\node_modules\crypto doesn't exist
C:\Users\node_modules doesn't exist or is not a directory
C:\node_modules doesn't exist or is not a directory
looking for modules in C:\Users\ssriv112\react-sso-code\node_modules
single file module
using description file: C:\Users\ssriv112\react-sso-code\package.json (relative path: ./node_modules/crypto)
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\Users\ssriv112\react-sso-code\node_modules\crypto doesn't exist
.web.mjs
Field 'browser' doesn't contain a valid alias configuration
C:\Users\ssriv112\react-sso-code\node_modules\crypto.web.mjs doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
C:\Users\ssriv112\react-sso-code\node_modules\crypto.mjs doesn't exist
.web.js
Field 'browser' doesn't contain a valid alias configuration
C:\Users\ssriv112\react-sso-code\node_modules\crypto.web.js doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
C:\Users\ssriv112\react-sso-code\node_modules\crypto.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
C:\Users\ssriv112\react-sso-code\node_modules\crypto.json doesn't exist
.web.jsx
Field 'browser' doesn't contain a valid alias configuration
C:\Users\ssriv112\react-sso-code\node_modules\crypto.web.jsx doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
C:\Users\ssriv112\react-sso-code\node_modules\crypto.jsx doesn't exist
C:\Users\ssriv112\react-sso-code\node_modules\crypto doesn't exist
@ ./src/SecuredApp.js 8:0-71 17:24-35 35:6-13 108:10-17 114:30-42
@ ./src/index.js 8:0-38 11:33-43_**

Thank you once again for your efforts.. :)

[christoph-bittmann]

Hi there!
I like to use these great library in my project. Unfortunately I also was stopped by these error message. As t-knapp adviced, I created a webpack config file and put the fallback option in there. But it doesn't work :(

Could anyone give me any hint how to solve these error?
I would also be happy if I could contribute a solution by making a pull request or so.

[DraconPern]

I ran into the same issue. According to facebook/create-react-app#11756 it will be good if the library doesn't rely on nodejs polyfills..

[christoph-bittmann]

My pullreqest will solve these problem, feel free to review changes or use fork https://github.com/christoph-bittmann/react-oauth2-pkce