javascript - 找不到模块 : Error: Can't resolve 'crypto' and Cant resolve 'fs'

Question

我刚开始学习 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 运行应用程序时它会抛出一堆错误

Compiled with problems:X ERROR in ./node_modules/mysql/lib/Connection.js 1:13-30 Module not found: Error: Can't resolve 'crypto' in 'C:\xampp\htdocs\socialapp\node_modules\mysql\lib' 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 }ERROR in ./node_modules/mysql/lib/protocol/Auth.js 3:13-30Module not found: Error: Can't resolve 'crypto' in 'C:\xampp\htdocs\socialapp\node_modules\mysql\lib\protocol' 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 }ERROR in ./node_modules/mysql/lib/protocol/sequences/Query.js 3:9-22Module not found: Error: Can't resolve 'fs' in 'C:\xampp\htdocs\socialapp\node_modules\mysql\lib\protocol\sequences'

删除 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 自动导入:import {response } from 'express' 这导致 'fs' 模块出错。

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

这就是我用 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 block 中找到(您可以按 ctrl + f 并键入“resolve”)解析 block 。这里需要为每个找不到的模块提供回退。这是我使用的代码:

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"),
       },