Module not found: Error: Can't resolve 'crypto' in react browser project

Question

Today when I debugging my project using this command:

npm run start

shows error like this:

Compiled with problems:
×
ERROR in ./node_modules/jsonwebtoken/sign.js 18:4-21
Module not found: Error: Can't resolve 'crypto' in '/Users/xiaoqiangjiang/source/reddwarf/frontend/ai-web/node_modules/jsonwebtoken'

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 }
ERROR in ./node_modules/jsonwebtoken/verify.js 13:4-21
Module not found: Error: Can't resolve 'crypto' in '/Users/xiaoqiangjiang/source/reddwarf/frontend/ai-web/node_modules/jsonwebtoken'

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 }
ERROR in ./node_modules/jwa/index.js 3:13-30
Module not found: Error: Can't resolve 'crypto' in '/Users/xiaoqiangjiang/source/reddwarf/frontend/ai-web/node_modules/jwa'

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 }
ERROR in ./node_modules/jws/lib/data-stream.js 3:13-30
Module not found: Error: Can't resolve 'stream' in '/Users/xiaoqiangjiang/source/reddwarf/frontend/ai-web/node_modules/jws/lib'

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: { "stream": require.resolve("stream-browserify") }'
    - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "stream": false }
ERROR in ./node_modules/jws/lib/sign-stream.js 5:13-30
Module not found: Error: Can't resolve 'stream' in '/Users/xiaoqiangjiang/source/reddwarf/frontend/ai-web/node_modules/jws/lib'

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: { "stream": require.resolve("stream-browserify") }'
    - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "stream": false }
ERROR in ./node_modules/jws/lib/verify-stream.js 5:13-30
Module not found: Error: Can't resolve 'stream' in '/Users/xiaoqiangjiang/source/reddwarf/frontend/ai-web/node_modules/jws/lib'

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: { "stream": require.resolve("stream-browserify") }'
    - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "stream": false }

I have searching from internet and tried:

npm install stream-browserify
npm install crypto-js

add this config to tsconfig.json:

"paths": {
      "@/*": ["src/*"],
      "crypto": [
        "node_modules/crypto-browserify"
      ],
      "stream": [
        "node_modules/stream-browserify"
      ]

could not fixed this issue. Am I missing something? what should I do to fixed this issue? I am not eject the webpack config and using react-app-rewired to mange the webpack config. I also tried this config in tsconfig.json:

"paths": {
  "crypto": [
    "node_modules/crypto-js"
  ]
}

BTW, this is my project package.json:

{
  "name": "ai-web",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ant-design/icons": "^5.0.1",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/event-source-polyfill": "^1.0.1",
    "@types/hashmap": "^2.3.1",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.14",
    "@types/react-dom": "^18.0.11",
    "antd": "^5.4.2",
    "assert": "^2.0.0",
    "axios": "^1.3.4",
    "browserify-zlib": "^0.2.0",
    "buffer": "^6.0.3",
    "crypto": "^1.0.1",
    "crypto-browserify": "^3.12.0",
    "crypto-js": "^4.1.1",
    "dayjs": "^1.11.7",
    "event-source-polyfill": "^1.0.31",
    "gulp-connect": "^5.7.0",
    "hashmap": "^2.4.0",
    "idb": "^7.1.1",
    "js-wheel": "https://github.com/jiangxiaoqiang/js-wheel.git",
    "process": "^0.11.10",
    "query-string": "8.1.0",
    "rd-component": "0.1.23",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-markdown": "^8.0.5",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.9.0",
    "react-scripts": "5.0.1",
    "react-syntax-highlighter": "^15.5.0",
    "redux": "^4.2.1",
    "stream-browserify": "^3.0.0",
    "tslib": "^2.5.0",
    "typescript": "^4.9.5",
    "util": "^0.12.5",
    "uuid": "^9.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired 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"
    ]
  },
  "devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-syntax-highlighter": "^15.5.6",
    "@types/uuid": "^9.0.1",
    "babel-plugin-root-import": "^6.6.0",
    "browser-sync": "^2.29.1",
    "customize-cra": "^1.0.0",
    "gulp": "^4.0.2",
    "gulp-cli": "^2.3.0",
    "gulp-typescript": "^6.0.0-alpha.1",
    "react-app-rewired": "^2.2.1"
  }
}

score 1 · Accepted Answer · answered May 03 '23 at 18:32

1

You should not use node modules in the frontend, that's why the webpack can't compile it without polyfills. You need to use the crypto function in the backend of your project.

But if you really want to use the crypto model of Node.js, follow the instructions that the error provided.

If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }' - install 'crypto-browserify'

answered May 03 '23 at 18:32

Luka Hietala

106
5

1

This might also be useful https://stackoverflow.com/questions/54162297/module-not-found-error-cant-resolve-crypto – Luka Hietala May 03 '23 at 18:36

Module not found: Error: Can't resolve 'crypto' in react browser project

1 Answers1