找不到模塊：錯誤：無法解析“加密”

Question

錯誤信息：

重大變化：webpack < 5 用於默認包含 node.js 核心模塊的 polyfill。 這已不再是這種情況。 驗證您是否需要此模塊並為其配置 polyfill。

所以我在谷歌上搜索這個問題並且在尋找解決方案時遇到了很多問題。 所以我想和你分享：

1. 首先，這不僅會發生在加密貨幣上，還會發生在 http、https、os 等其他東西上。

2. 檢查數據包（這種情況下安裝了crypto-browserify）應該有一個文件夾node_modules\\crypto-browserify

如果它不存在： npm install crypto browsrify ，然后yarn add @types/node@15.12.5 -D （對於這個節點版本）

在 node_modules\\crypto-browserify 編輯 package.json 並添加

 , 
 "optionalDependencies": {},
 "browser": {
   "crypto": false
 },

（在 devDependencies 之后）

3. 在 tsconfig.json 下添加

"compilerOptions": {
"paths":{
   "crypto":["node_modules/crypto-browserify"],
   "http":["node_modules/stream-http"],
   "https":["node_modules/https-browserify"]
   },

4. 在angluar.json下添加

"architect": {
   "build": {
   "builder": "@angular-devkit/build-angular:browser",
   "options": {
      "allowedCommonJsDependencies": ["crypto"],
      "allowedCommonJsDependencies": ["http"],
      "allowedCommonJsDependencies": ["https"],

Answer 1

我在 ReactJS 中使用 create-react-app(facebook) 遇到了這個問題

解決方案：

1. 首先安裝必要的包“crypto-browserify”

2. 使用 create-react-app 修改 reactjs 中的 webpack.config.js 這個文件在里面：

node_modules/react-scripts/config/webpack.config.js

• 搜索 module.exports 並在此函數中返回：

module.exports = function (webpackEnv) {
  ...
  return {
   ...
    resolve: {
      ...
      fallback: {
        // Here paste
        crypto: require.resolve("crypto-browserify"),

      }
    }
  }
}

注意：可能需要更多的包，例如“stream-browserify”步驟是一樣的。 此解決方案有效，但當 webpack 項目啟動時顯示警告

Pd：我的母語不是英語，但我希望能理解我。