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

【问题标题】：Module not found: Error: Can't resolve 'crypto' and Cant resolve 'fs'找不到模块：错误：无法解析“加密”和无法解析“fs”
【发布时间】：2022-06-20 19:44:19
【问题描述】：

我刚开始学习 react，我一直在尝试让我的 react 应用程序连接到我的数据库

var mysql = require('mysql');
var con = mysql.createConnection({
  host: "localhost",
  user: "*",
  password: "*",
  database: "media_app"
});
con.connect(function(err) {
  if (err) throw err;
  console.log("Connected!");
});

但是当我使用 npm start 运行应用程序时，它会抛出一堆错误

编译时出现问题：./node_modules/mysql/lib/Connection.js 中的 X 错误 1:13-30 未找到模块：错误：无法解析 'C:\xampp\htdocs\socialapp\ 中的 'crypto' node_modules\mysql\lib' BREAKING CHANGE：webpack

删除var mysql = require('mysql') 修复它，但我无法连接到数据库

其中有 22 个而不是 3 个用于其他无法解决的问题，例如缓冲区、url、tls 和其他东西，但我只是运行 npm install ... 对于每个错误都消失了，但这些错误在我运行时没有npm install crypto 或 fs 我已经尝试添加

"browser": {
    "crypto": false
}

我尝试使用 tsconig.json 文件进入 package.json 我尝试将 resolve.fallback 添加到 webpack 配置文件中，但似乎没有任何效果

【问题讨论】：

你不能在前端运行数据库。你不是在 NodeJS 上运行，而是在浏览器上运行，如果你不知道的话。

标签： javascript mysql node.js reactjs npm

【解决方案1】：

首先，检查您自己文件中的所有导入语句。我在后端使用 express 并自动导入 vscode intellisense：import { response } from 'express'，这导致“fs”模块出错。

您还需要polyfill 您的代码。正如您在错误消息中看到的那样，由于 Webpack 版本 5 默认情况下不填充核心 node.js 模块，因此发生了重大变化。例如，'crypto' 是一个核心 node.js 模块，默认情况下不再填充。

这就是我用 npx-create-react-app 和 webpack5 解决 polyfilling 问题的方法，希望它对你有用。

您需要npm i crypto-browserify（如您的错误消息中所述）。

然后在以下位置找到 webpack.config.js 文件：yourapp/node_modules/react-scripts/config/webpack.config.js

查看 webpack.config.js 文件并在 modules.exports 块中找到（您可以 ctrl + f 并键入“resolve”）resolve 块。在这里，您需要为每个找不到的模块提供后备。这是我使用的代码：

resolve: {
      fallback: {
        "crypto": require.resolve("crypto-browserify"),
       },

修改 webpack.config.js 文件后重启你的项目。

如果您收到后续错误，指出需要使用 polyfill，只需针对该特定模块重复上述过程即可。例如，如果我有一条关于 'stream' 的错误消息，我会 npm i stream-browserify 并将 webpack.config.js 修改为：

resolve: {
      fallback: {
        "crypto": require.resolve("crypto-browserify"),
        "stream": require.resolve("stream-browserify"),
       },

【讨论】：