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

Question

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

Answer 1

This is a big issue, and I will not elaborate on the various moving parts that causes the issue.
What you need to do:
run yarn add crypto-browserify stream-browserify buffer
run yarn add -D react-app-rewired
create a new file in the root of your directory: config-overrides.js with the contents:
const webpack = require('webpack');
module.exports = function override(config, env) {
config.resolve = config.resolve || {};
config.resolve.fallback = config.resolve.fallback || {};
config.resolve.fallback.crypto = require.resolve('crypto-browserify');
config.resolve.fallback.stream = require.resolve('stream-browserify');
config.resolve.fallback.buffer = require.resolve("buffer")
config.resolve.alias.buffer = 'buffer'
config.plugins = config.plugins || [];
config.plugins.push(new webpack.ProvidePlugin({Buffer: ['buffer', 'Buffer'],}));
return config;
}
Edit your package.json and make sure it looks like this:
...
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
...
run rm -fr node_modules/.cache
Read more:
The actual issue that caused all this - "BREAKING CHANGE: webpack < 5 used to include polyfills..." - issue 11756 at CRA
related react-oauth2-pkce issue 33
How to re-wire CRA