模块未找到错误: Error: 无法解析 'crypto'

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 版本）。

在 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. 在 angular.json 中添加

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

- Alexander Wolters

---

顺便问一下，有人可以告诉我如何分享整个代码块吗？stackoverflow 告诉我要在每行使用“`”。 - Alexander Wolters

阅读此内容：[询问] - R. Richards

使用三个反引号开始代码块，然后再次使用三个反引号来关闭它。我还在开头的三个反引号后面加上了 json 来获得正确的语法高亮。 - Darren Cook

这个最好改成自问自答的形式：把问题中只给出错误信息，然后把所有的配置更改放在答案中。 - Darren Cook

https://dev59.com/RVQJ5IYBdhLWcg3wSj4C#67076572 是一个更简单的解决方案吗？还是解决了不同的问题？ - Darren Cook

Answer 1

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

解决方法：

1. 首先安装必要的包 "crypto-browserify"

2. 修改webpack.config.js文件，此文件位于reactjs中的create-react-app中:

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项目启动时会显示警告。

注：我不是英语母语者，但我希望你能理解我的意思。

- Camilo Gomez