typescript - მოდული ვერ მოიძებნა: შეცდომა: ბრაუზერში შექმნილ react პროექტში 'crypto'-ს გადაწყვეტილება შეუძლებელია
დღეს, როცა დავკეპდე ჩემს პროექტს ამ ბრძანების გამოყენებით:
npm run start
იჩვენებს ასეთ შეცდომას:
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 }
მე ინტერნეტში ვეძებე და მოვინდომე:
- npm დააინსტალირეთ stream-browserify
- npm დაინსტალირე crypto-js
დაამატეთ ეს კონფიგურაცია tsconfig.json-ში:
"paths": {
"@/*": ["src/*"],
"crypto": [
"node_modules/crypto-browserify"
],
"stream": [
"node_modules/stream-browserify"
]
არ შემეძლო ამ პრობლემის გამოსწორება. მეკარგება რამე? რა უნდა გავაკეთო ამ პრობლემის გამოსასწორებლად? მე არ გამოვიყენე webpack კონფიგი გაშვებული და ვიღებ react-app-rewired-ს webpack კონფიგის მართვისთვის. მე ასევე ვცადე ეს კონფიგი tsconfig.json-ში:
"paths": {
"crypto": [
"node_modules/crypto-js"
]
}
მოვახსენო, ეს არის ჩემი პროექტის 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"
}
}
პასუხი #1
თქვენ არ უნდა გამოიყენოთ node მოდულები ფრონტენდში, ამიტომ webpack ვერ აკომპილირებს მას პოლიფილების გარეშე. თქვენს პროექტის ბექენდში უნდა გამოიყენოთ crypto ფუნქცია.
მაგრამ თუ თქვენ ნამდვილად გინდათ გამოიყენოთ Node.js-ის crypto მოდელი, მიჰყევით ინსტრუქციებს, რომლებიც შეცდომამ მიაწოდა.
თუ გსურთ პოლიფილის დამატება, თქვენ უნდა: - დაამატოთ ფოლბექი 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }' - დააინსტალიროთ 'crypto-browserify'