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

Question

ive just started to learn react and Ive been trying to get my react app to connect to my database with

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!");
});

but when i run the app with npm start it throws a bunch of errors

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-30 Module 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-22 Module not found: Error: Can't resolve 'fs' in 'C:\xampp\htdocs\socialapp\node_modules\mysql\lib\protocol\sequences'

removing the var mysql = require('mysql') fixes it but then i cant connect to the database

There were 22 of these instead of 3 for other things it couldnt resolve like buffer, url, tls and other things but i just ran npm install ... for each one and the errors went away but these ones didnt when i ran npm install crypto or fs and i have tried to add

"browser": {
    "crypto": false
}

into package.json ive tried with the tsconig.json file and ive tried adding resolve.fallback into the webpack config file but nothing seems to work

Answer 1

First off, check all your import statements within your own files. I was using express on the backend and vscode intellisense auto-imported: import { response } from 'express' which caused an error with the 'fs' module.

You will also need to polyfill your code. As you can see in your error message, there is a breaking change as Webpack version 5 does not polyfill core node.js modules by default. For example, 'crypto' is a core node.js module that is no longer polyfilled by default.

This is how I resolved the polyfilling issue with npx-create-react-app and webpack5, hopefully it will work for you.

You will need to npm i crypto-browserify (as mentioned in your error message).

Then locate the webpack.config.js file at: yourapp/node_modules/react-scripts/config/webpack.config.js

Look through the webpack.config.js file and find (you can ctrl + f and type 'resolve') the resolve block within the modules.exports block. Here you need to provide a fallback for each module which cannot be found. This is the code that I used:

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

Restart your project after modifying the webpack.config.js file.

If you get subsequent errors which are stating that a polyfill is necessary, just repeat the above process for that specific module. For example, if I had an error message for 'stream', I would npm i stream-browserify and modify the webpack.config.js to:

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