REACT/create-react-app: Module not found crypto / Uncaught ReferenceError: process is not defined

Question

I have seen a couple related questions on this topic but nothing has quite worked!

I am working on a react app and had a bunch of module not found errors once i hit npm start. A few of the not found modules were 'util', 'buffer', 'stream', and 'crypto'. I was able to resolve all but crpyto by npm installing the names here.

For crypto, I'm not sure what I'm using that depends on it, but it is giving me big problems. To solve this, I installed crpyto-browserify and added "browser":{"crypto":false} to my package.json of my 'jwa' module in node modules (where it said i was having problems).

Once I did that, I get a reference error that "process is not found". I've never had this issue before. Including my package.json below, any tips??

To start the react app, I used npx create-react-app appName

Oh, one more note I also created a webpack.config.js file

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.26.1",
    "bootstrap": "^5.1.3",
    "jsonwebtoken": "^8.5.1",
    "react": "^17.0.2",
    "react-app-polyfill": "^3.0.0",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.2.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Oh, one more note I also created a webpack.config.js file that looks like this:

const webpack = require('webpack')

module.exports = {
    resolve: {
      fallback: {
        assert: require.resolve('assert'),
        buffer: require.resolve('buffer'),
        console: require.resolve('console-browserify'),
        constants: require.resolve('constants-browserify'),
        crypto: require.resolve('crypto-browserify'),
        domain: require.resolve('domain-browser'),
        events: require.resolve('events'),
        http: require.resolve('stream-http'),
        https: require.resolve('https-browserify'),
        os: require.resolve('os-browserify/browser'),
        path: require.resolve('path-browserify'),
        punycode: require.resolve('punycode'),
        querystring: require.resolve('querystring-es3'),
        stream: require.resolve('stream-browserify'),
        string_decoder: require.resolve('string_decoder'),
        sys: require.resolve('util'),
        timers: require.resolve('timers-browserify'),
        tty: require.resolve('tty-browserify'),
        url: require.resolve('url'),
        util: require.resolve('util'),
      },
    },

    plugins: [
        new webpack.ProvidePlugin({
          process: 'process/browser',
        }),
      ]
  };