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

Question

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

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\node_modules\mysql 中的 'crypto' \lib' 重大更改：webpack < 5 用于默认包含 node.js 核心模块的 polyfill。 这已不再是这种情况。 验证你是否需要这个模块并为它配置一个 polyfill。 如果你想包含一个 polyfill，你需要： - 添加一个后备 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }' - 安装 'crypto-browserify' 如果你不想要包含一个 polyfill，您可以使用这样的空模块：resolve.fallback: { "crypto": false } ./node_modules/mysql/lib/protocol/Auth.js 中的错误 3:13-30 找不到模块：错误：无法解析 'C:\xampp\htdocs\socialapp\node_modules\mysql\lib\protocol' 中的 'crypto' 重大更改：webpack < 5 用于默认包含 node.js 核心模块的 polyfill。 这已不再是这种情况。 验证你是否需要这个模块并为它配置一个 polyfill。 如果你想包含一个 polyfill，你需要： - 添加一个后备 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }' - 安装 'crypto-browserify' 如果你不想要包含一个 polyfill，您可以使用这样的空模块：resolve.fallback: { "crypto": false } ./node_modules/mysql/lib/protocol/sequences/Query.js 中的错误 3:9-22 模块不是发现：错误：无法解析“C:\xampp\htdocs\socialapp\node_modules\mysql\lib\protocol\sequences”中的“fs”

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

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

"browser": {
    "crypto": false
}

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

Answer 1

首先，检查您自己文件中的所有导入语句。 我在后端使用 express 并且 vscode intellisense auto-imported: 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 browserify 并将 webpack.config.js 修改为：

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