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