Webpack 5 Node Polyfill instructions don't work

I am trying to install jsforce with:

webpack 5.17.0 webpack-cli 4.4.0

No matter what I do I get these errors:

ERROR in ./node_modules/jsforce/lib/oauth2.js 8:18-40  Module not found: Error: Can't resolve 'querystring' in '/var/www/pos/node_modules/jsforce/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: { "querystring": require.resolve("querystring-es3") }'      - install 'querystring-es3'  If you don't want to include a polyfill, you can use an empty module like this:      resolve.fallback: { "querystring": false }   @ ./node_modules/jsforce/lib/core.js 12:17-36   @ ./node_modules/jsforce/lib/browser/jsforce.js 3:14-32   @ ./src/modules/checkout.js 4:0-30   @ ./src/index.js 3:0-45    

(and so on with 3 other modules)

I have tried the requested steps:

• I have installed all 4 packages listed (browserify-stream, util, browserify-timers, and querystring-es3)
• I have added the following to my webpack.config.js:

module.exports = {  ...    resolve: {      fallback: {           "querystring": require.resolve("querystring-es3"),          "timers": require.resolve("timers-browserify"),          "util": require.resolve("util/"),          "stream": require.resolve("stream-browserify")      },    },  ...  

And I restarted webpack. Again, and again. No change.

I have also tried this instead from a different blog post:

  resolve: {      alias: {           stream: "stream-browserify",          querystring: "querystring-es3",          timers: 'timers-browserify',          util: 'util'      }    },  

Also makes absolutely no difference.

In short - none of the instructions provided actually do anything. I've done all the steps exactly as stated and I continue to get the same error with the same instructions. How is one supposed to get this module installed?

Here is my whole webpack config:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');    module.exports = {    resolve: {      alias: {           stream: "stream-browserify",          querystring: "querystring-es3",          timers: 'timers-browserify',          util: 'util'      }    },    mode: 'development',    experiments: {      topLevelAwait: true,    },    watch: true,    module: {      rules: [              {                  test: /\.s?[ac]ss$/,                  use: [                      MiniCssExtractPlugin.loader,                      { loader: 'css-loader', options: { url: false, sourceMap: true } },                      { loader: 'sass-loader', options: { sourceMap: true } }                  ],              },{          test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,          use: [{              loader: 'file-loader',              options: {                name: '[name].[ext]',                outputPath: 'font/'              }          }]        }      ]    },          devtool: 'source-map',      plugins: [          new MiniCssExtractPlugin({              filename: "style.css"          })                ],      resolve: {          alias: {              vue: 'vue/dist/vue.js'          },      },  };  

and my whole package.json:

{    "dependencies": {      "file-loader": "^6.2.0",      "latest-version": "^5.1.0",      "postcss-loader": "^4.2.0",      "sass": "^1.32.5",      "sass-loader": "^10.1.1"    },    "name": "pos",    "version": "1.0.0",    "main": "webpack.config.js",    "devDependencies": {      "@stripe/terminal-js": "^0.5.0",      "bootstrap": "^5.0.0-beta1",      "bootstrap-icons": "^1.3.0",      "buffer": "^6.0.3",      "css-loader": "^5.0.1",      "jsforce": "^1.10.1",      "less-loader": "^7.3.0",      "mini-css-extract-plugin": "^1.3.4",      "querystring-es3": "^0.2.1",      "stream-browserify": "^3.0.0",      "style-loader": "^2.0.0",      "timers-browserify": "^2.0.12",      "util": "^0.12.3",      "vue": "^2.6.12",      "webpack": "^5.17.0",      "webpack-cli": "^4.4.0"    },    "scripts": {      "test": "echo \"Error: no test specified\" && exit 1"    },    "keywords": [],    "private": true,    "author": "",    "license": "ISC",    "description": ""  }    

I am including jsforce like this in my entry file:

import jsforce from 'jsforce';  

https://stackoverflow.com/questions/65894521/webpack-5-node-polyfill-instructions-dont-work January 26, 2021 at 09:00AM