node-polyfill-webpack-plugin not recognizing in webpack.config.js

Question

I am trying to use knex for sqlite local storage in an electron application and have gotten the “Breaking Change” message due to knex uses some of the polyfll components that seize to exist on webpack v5. I heard that I can use node-polyfill-webpack-plugin to put the polyfills back in. For this project, I created a “webpack.config.js” at root and put the following contents inside:

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

module.exports = {
    // Other rules...
    plugins: [
        new NodePolyfillPlugin()
    ]
}

Here is my package.json:

{
  "name": "react_test",
  "homepage": "./",
  "version": "0.1.0",
  "private": true,
  "main": "public/electron.js",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "assert": "^2.0.0",
    "axios": "^0.21.1",
    "babel-loader": "^8.2.2",
    "buffer": "^6.0.3",
    "constants-browserify": "^1.0.0",
    "copy-webpack-plugin": "^7.0.0",
    "crypto-browserify": "^3.12.0",
    "css-loader": "^5.0.1",
    "concurrently": "^6.0.0",
    "cross-env": "^7.0.3",
    "file-loader": "^6.2.0",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^5.0.0",
    "https-browserify": "^1.0.0",
    "electron": "^12.0.0",
    "electron-is-dev": "^2.0.0",
    "knex": "^1.0.1",
    "node-polyfill-webpack-plugin": "^1.1.4",
    "os-browserify": "^0.3.0",
    "path-browserify": "^1.0.1",
    "prettier": "^2.2.1",
    "process": "^0.11.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router": "^5.2.1",
    "react-router-dom": "^5.2.1",
    "react-scripts": "5.0.0",
    "regenerator-runtime": "^0.13.7",
    "stream-browserify": "^3.0.0",
    "stream-http": "^3.2.0",
    "style-loader": "^2.0.0",
    "svg-url-loader": "^7.1.1",
    "webpack": "^5.21.1",
    "webpack-cli": "^3.3.12",
    "wait-on": "^5.2.1",
    "web-vitals": "^2.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron": "wait-on tcp:3000 && electron .",
    "electron:build": "npm build && electron-builder -c.extraMetadata.main=build/main.js",
    "package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds",
    "package-win": "electron-packager . electron-tutorial-app --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"Electron Tutorial App\"",
    "package-all": "electron-packager . electron-app --all --asar",
    "package-linux": "electron-packager . electron-tutorial-app --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/png/1024x1024.png --prune=true --out=release-builds"
  },
  "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"
    ]
  }
}

However, when I run “npm start”, I am still getting all of the webpack breaking change messages.

Any help would be much appreciated. I have never seen this problem until I am trying to use any type of local storage (such as sqlite or NEDB) and have done an extensive search on Stack Overflow and tried several of those suggested methods (in fact the node-polyfill-webpack-plugin was from reading this site) but I still cannot get it to work.

node-polyfill-webpack-plugin not recognizing in webpack.config.js

0 Answers