未找到模块：错误：无法解析“加密”答案

【问题标题】：Module not found: Error: Can't resolve 'crypto'未找到模块：错误：无法解析“加密”
【发布时间】：2019-06-07 07:22:03
【问题描述】：

我在运行ng serve 时收到以下错误列表。

我的包JSON如下：

{   "name": "ProName",   "version": "0.0.0",   "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"   },   "private": true,   "dependencies": {
    "@angular-devkit/build-angular": "~0.12.0",
    "@angular/animations": "5.2.10",
    "@angular/common": "5.2.10",
    "@angular/compiler": "5.2.10",
    "@angular/compiler-cli": "5.2.10",
    "@angular/core": "5.2.10",
    "@angular/forms": "5.2.10",
    "@angular/platform-browser": "5.2.10",
    "@angular/platform-browser-dynamic": "5.2.10",
    "@angular/router": "5.2.10",
    "@types/dotenv": "^4.0.3",
    "@types/errorhandler": "0.0.32",
    "@types/express": "^4.16.0",
    "@types/node": "^10.5.1",
    "apostille-library": "^7.1.0",
    "core-js": "^2.5.4",
    "dotenv": "^6.0.0",
    "errorhandler": "^1.5.0",
    "express": "^4.16.0",
    "nem2-sdk": "^0.9.7",
    "rxjs": "~6.3.3",
    "stream": "0.0.2",
    "tslib": "^1.9.0",
    "typescript": "^2.9.2",
    "zone.js": "~0.8.26"   } }

我得到的错误：

./node_modules/aws-sign2/index.js 中的错误模块未找到：错误：无法解析“加密” '/Users/MYPC/Documents/Myproj/ProName/node_modules/aws-sign2' 错误 ./node_modules/aws4/aws4.js 找不到模块：错误：无法解析 “/Users/MYPC/Documents/Myproj/ProName/node_modules/aws4”中的“加密” ./node_modules/ecc-jsbn/index.js 中的错误找不到模块：错误：无法解析“加密” '/Users/MYPC/Documents/Myproj/ProName/node_modules/ecc-jsbn' 中的错误 ./node_modules/http-signature/lib/verify.js 找不到模块：错误：无法解析“加密” '/Users/MYPC/Documents/Myproj/ProName/node_modules/http-signature/lib' ./node_modules/http-signature/lib/signer.js 中的错误找不到模块：错误：无法解析中的“加密” '/Users/MYPC/Documents/Myproj/ProName/node_modules/http-signature/lib' ./node_modules/nem-sdk/build/external/nacl-fast.js 模块中的错误不是发现：错误：无法解析“加密” '/Users/MYPC/Documents/Myproj/ProName/node_modules/nem-sdk/build/external' ./node_modules/nem-sdk/node_modules/aws-sign2/index.js 中的错误

【问题讨论】：

@Illep 尝试全局安装。
@Variable crypto 是 node.js 中的内置模块。
还有其他一些使用它的库。我该如何解决？
我使用的是 Angular 8，这在使用 ng build --prod 进行编译时解决了同样的问题。 github.com/angular/angular-cli/issues/…
原来的答案来了：github.com/angular/angular-cli/issues/…

标签： javascript node.js angular npm nem

【解决方案1】：

我最近在我正在试验的一个小项目中尝试使用另一个库 (tiff.js) 时遇到了类似的问题。

我解决这个问题的方法是将以下内容添加到我的 package.json 文件中，就在 devDependencies 部分之后。

"devDependencies": {
    ...
},
"browser": {
    "crypto": false
}

尝试在应用程序中使用库时，这似乎没有任何不利影响。

【讨论】：

发生这种情况的原因是，当您运行ng serve 时，它会捆绑您在package.json 中的依赖项，以便在浏览器上提供它。但是，package.json 通常包括服务器和浏览器依赖项，任何原生模块依赖项（如crypto）都不能捆绑在浏览器上服务。在package.json 的browser 部分设置'crypto': false 告诉ng serve 不要尝试捆绑该文件。
您可能必须停止并重新启动“ng serve”操作才能使其生效。谢谢，成功了。
很好的解决方案，除非你真的需要使用加密库。
在我的情况下，我使用 webpack 5。我收到了一个警告，解释了它发生的原因以及该怎么做：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 }
那么 resolve.fallback 放在哪里？ angular.json 在其中一层？

【解决方案2】：

在该项目下的 tsconfig.json 文件中添加此设置可解决此警告

"compilerOptions": {
"baseUrl": "./",
"paths": {
  "crypto": [
    "node_modules/crypto-js"
  ]
}

【讨论】：

文件名应该是tsconfig.json
这对我有用。我们无法在我们的项目中使用 browser.crypto = false 修复程序，但这有效并且我们的高级开发人员可以接受。
这是唯一对我有用的解决方案。 browser.crypto=false 没有做任何事情
为我工作，不得不改变路径
为我工作，但我不得不将“../../node_modules/crypto-js”更改为“node_modules/crypto-js”。 Angular 10 和部分导入，如 import MD5 from 'crypto-js/md5';

【解决方案3】：

我喜欢R. Richards 的回答，但我认为提供更多信息会很有用。

这是 Angular 的一个已知问题，Angular CLI 开发团队似乎认为这是一个特性而不是错误。我以及this issue thread 中的其他开发人员不同意。该线程的贡献者提供了几个解决方法修复，但我的项目在我实施 R. Richards 的解决方案之前没有成功编译。不过，我并没有恢复之前的更改，因此 tacnoman 和 GrandSchtroumpf 的修复可能对其他人有用。

有些人（例如此处的clovis1122 和该问题线程中的其他人）质疑为什么 Web 应用程序需要访问这些库以及为什么不能在服务器端完成必要的任务。我不能代表所有人，但我的用例是，在验证用户帐户时，Strapi 会使用必须由客户端解码的 JSON Web Token 字符串进行响应。由于the necessary library 依赖于crypto 和stream，因此除非这些依赖项可用，否则您将无法提取JWT 过期时间。

如果有人无法从 R. Richards 的答案中推断出问题，您必须将任何出现在“无法解决 x”错误中的依赖项设置为 false。例如，我的 package.json 的关键部分是：

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

【讨论】：

【解决方案4】：

我想我会扩展 Tarique Ahmed 在他的回答中所写的内容。

我使用的 npm 模块在代码中有以下行：

const crypto = require('crypto');

我无法添加：

"browser": {
  "crypto": false
}

到 package.json，因为 crypto 包必须是构建的一部分。

事实证明，在编译过程中，Angular 似乎已经决定安装 crypto-browserify 包而不是 crypto。

将以下内容添加到tsconfig.json 文件会指示构建在每次需要crypto 时使用crypto-browserify 库。如您所见，stream 包也有同样的问题。

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

【讨论】：

这是提供的最清晰、最精确的解决方案。刚刚安装并使用crypto-browserify 而不是crypto 并制作了 tsconifg.json 如上所述。

【解决方案5】：

在 Angular 11 和 crypto-js 4 遇到同样的问题（并在 tsconfig.json 中手动设置路径）后，我发现将 crypto-js 回滚到版本 3.1.9-1 解决了这个问题。似乎是版本 4 中的更改导致了该问题。

npm install crypto-js@3.1.9-1

在回购问题中解释：

GitHub issue

【讨论】：

我遇到了同样的问题，它对我有用。我使用 Angular 11 并安装了 4.0 加密版本。
我在使用 Angular 11 时遇到了同样的问题，我使用的是 crypto-js 版本 4.0。我确认这是该案例的解决方案。

【解决方案6】：

如果您升级到 Webpack 5，则需要将其添加到您的 webpack 配置文件：

resolve: {
    fallback: { crypto: false },
},

【讨论】：

+1 这适用于当前角度 12，node: { crypto: false } 已弃用。您需要将 webpack.config.ts 与 @angular-builders/custom-webpack 合并
@LucaFagioli 我见过这个解决方案，但我没有 webpack 配置，或者至少我没有看到它
@RicardoSanchezSantos Webpack 实际上可以在没有配置文件的情况下工作。您需要创建一个。检查this page 以获得支持。

【解决方案7】：

aws-sign2 是一个 NodeJS 包（crypto 是一个 NodeJS 模块），但看起来您正在处理一个 Web 应用程序。 crypto 模块在该环境中不可用是有道理的。

是否可以在服务器端完成您需要做的事情？否则，您可能需要寻找其他软件包。

【讨论】：

【解决方案8】：

我已使用以下步骤解决了我的问题：

将以下内容添加到 tsconfig.json 以解决加密警告：

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

并将下面添加到 angular.json

"options": {
"allowedCommonJsDependencies": [
              "crypto-js"
            ],
...
}

【讨论】：

【解决方案9】：

对于 Laravel Inertia JS 项目，我的解决方案是：

1- 将依赖项添加到 package.json

   "dependencies": {
        "crypto-browserify": "3.12.0",
        "crypto-random-string": "^3.3.0",
        "stream": "^0.0.2"
    }

2-在 webpack.config.js 中：

const path = require('path');

module.exports = {
    resolve: {
        alias: {
            '@': path.resolve('resources/js'),
        },
        fallback: {
            crypto: require.resolve('crypto-browserify'),
            stream: require.resolve('stream'),
        },
    },
};

3-安装、构建和运行：

npm install && npm run watch

【讨论】：

【解决方案10】：

经过深入研究，我发现解决方案非常简单：替换从 'crypto-js' 导入 * 作为 CryptoJS； with 声明 var CryptoJS;

【讨论】：

如果 'from' 部分被跳过，应用程序如何知道从哪里获取 Crypto？

【解决方案11】：

使用直接导入可能不适用于 ES6 环境..

这可能会对你有所帮助。

$ npm i crypto-js@latest // 使用最新版本 4

import AES from 'crypto-js/aes';
import Utf8 from 'crypto-js/enc-utf8';
import { secretKey } from './environments/environment';

/** Encryption */
const data = {key: 'Test Value'};
const ciphertext = AES.encrypt(JSON.stringify(data), secretKey).toString();
console.log('Encrypted Data', ciphertext);

/** Decryption */
const bytes = AES.decrypt(ciphertext, secretKey);
const decryptedData = JSON.parse(bytes.toString(Utf8));
console.log('Decrypted Data', decryptedData);

https://github.com/brix/crypto-js/issues/168#issuecomment-785617218

【讨论】：

【解决方案12】：

在数组中添加带有文字“crypto-js”的allowedCommonJsDependencies选项，这在文件angular.json中：

"architect": 
        "build": {              
          "options": {               
            "allowedCommonJsDependencies": [
              "crypto-js"
            ]
          },
         }
 }

这将禁用在 Angular 11 中测试过的所有警告。

【讨论】：

【解决方案13】：

我的问题是我试图使用相同的代码构建到节点和 web，但是在导入 WebSocket 依赖项时无法构建到 web，在我的例子中是 ws

所以解决方案是使用包装器：

安装一个包装器，我将使用isomorphic-ws，因为它是为ws 制作的

npm i --save isomorphic-ws

删除const WebSocket = require('ws')

替换为：

const WebSocket = require('isomorphic-ws')

【讨论】：

【解决方案14】：

我最终进入

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

并添加：

fallback: {
        // Here paste
        crypto: require.resolve("crypto-browserify"),
        https: require.resolve("https-browserify"),
        http: require.resolve("stream-http"),
        url : require.resolve("url")
      }

现在我的 react 应用程序构建时出现错误但没有依赖问题。当我得到它构建时，我会更新它。

【讨论】：

【解决方案15】：

我在 ReactJS 中使用 create-react-app(facebook) 遇到了这个问题

解决方案：

首先安装必要的包“crypto-browserify”
用 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"),

      }
    }
  }
}

注意：您是否可能需要其他包，如何“流浏览”步骤是相同的。此解决方案有效，但是当 webpack 项目启动时，它会显示警告

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

【讨论】：