React v18 crypto module not found Breaking Change: webpack < 5

Viewed 31

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"
    ]
  }
}
0 Answers
Related