I've looked at about a dozen supposed solutions that didn't work for this problem.
My react application was working fine a couple of hours ago, and now this error keeps appearing, even when I make another react app.
I've looked at going to the webpack.config.js that's located in node_modules > react-scripts > config, but really baffled by where to add this supposed line of code:
resolve: {
fallback: { crypto: false },
},
I personally think React version 18 is broken.
Anyone know how I can resolve this? Thanks in advance.
Compiled with problems:
ERROR in ../node_modules/cookie-signature/index.js 4:13-30
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\Micha\OneDrive\Desktop\APPS\REACT\HOLISTIC\DEVELOPER\v2\api\node_modules\cookie-signature'
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 }
PS. I've done npm i crypto crypto-browserify cookie-signature
Tried modifying the webpack.config.js. No luck, hence I'm stuck.
I created a new webpack.config.js in the client folder.
The client folder was created using the terminal command npx create-react-app client.
In the file, I added.
module.exports = {
resolve: {
fallback: {
"crypto": require.resolve("crypto-browserify")
}
}
};
Also, did npm i crypto-browserify, and restarted my react app. Still have the same error.
package.json file
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"@reduxjs/toolkit": "^1.8.5",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"cookie-signature": "^1.2.0",
"crypto": "^1.0.1",
"crypto-browserify": "^3.12.0",
"crypto-js": "^4.1.1",
"firebase": "^9.9.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-persist": "^1.0.2",
"react-redux": "^8.0.2",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"redux-persist": "^6.0.0",
"uuid": "^9.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}