Module not found: Error: Can't resolve 'crypto' and Cant resolve '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