Node Polyfills 和 webpack.config.js 的问题

Question

I'm relatively new to web development, but I'm working on a React project where I'm trying to interface with an AWS database. To install MySql, I ran npm install mysql , which did end up importing the module, however I now get the error:

Module not found: Error: Can't resolve 'crypto' in '.\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.

I've done a lot of reading about Webpack, and I now understand that I just need to add a fallback, presumably in a new file called webpack.config.js in the root folder. However, I made it and the error is still there. Here's the exact code I used in the file:

module.exports = 
{
    entry:"/src/out.js",

    output:{
        path : "dist",
        filename: "bundle.js"
    },

    resolve: {
        fallback: {
          "fs": false,
          "tls": false,
          "net": false,
          "path": false,
          "zlib": false,
          "http": false,
          "https": false,
          "stream": false,
          "crypto": false,
          "crypto-browserify": false,
          "timers":false
        } 
      },
}

What am I doing wrong? It seems like Webpack is completely ignoring the config file, is it an issue with how I wrote the config file?

If it helps at all, I haven't changed any of the configurations bar installing the MySql module, and to export/compile I just use the npm start command, which runs it to a localhost.

Answer 1

Re-add support for Node.js core modules with node-polyfill-webpack-plugin :

And install dependency npm install crypto-browserify and npm install util

With the package installed, add the following to your webpack.config.js:

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")

module.exports = {
    resolve: {
      fallback: {
        // other fallbacks
         "util": require.resolve("util/"),
         "crypto": require.resolve("crypto-browserify")
      },
    }
    // Other rules...
    plugins: [
        new NodePolyfillPlugin()
    ]
}

Answer 2

I figured it out - for anyone with the same problem, this is what I did.

When you use create-react-app to make the app, it doesn't automatically recognize webpack.config.js , so you need to run npm install react-app-rewired and create another override file called config-override.js . Full instructions and files found here