Failing Webpack compilation (laravel-mix) due to an issue in node-sass lib/binding.js

I'm using laravel-mix, npm@6.14.7 and node@12.16.2. I've been having an issue for two days with compiling assets. I recently noticed that I was getting errors with node module fs and replaced it by using fs-extra. I also added in the following lines to my webpack.mx.js file.

mix.webpackConfig({
   node: {
     fs: "empty"
   },
   resolve: {
      alias: {
         "fs-extra" : "fs-extra/lib/index.js"
      }
   }
});

Upon completion of the build, I got a warning

WARNING in ./node_modules/node-sass/lib/binding.js
19:9-37 Critical dependency: the request of a dependency is an expression
 @ ./node_modules/node-sass/lib/binding.js
 @ ./node_modules/node-sass/lib/index.js
 @ ./resources/assets/js/style.js
 @ ./resources/assets/js/main.js
 @ multi ./resources/assets/js/main.js ./resources/assets/sass/main.scss

It looked ok, since it was just a warning but my app does not render in the browser and I get the following error from the console.

main.js:5519 Uncaught TypeError: fs.existsSync is not a function
    at Object.hasBinary (main.js:5519)
    at module.exports (main.js:34555)
    at Object.<anonymous> (main.js:29652)
    at Object.<anonymous> (main.js:30117)
    at __webpack_require__ (manifest.js:55)
    at Object.<anonymous> (main.js:26471)
    at Object.<anonymous> (main.js:29633)
    at __webpack_require__ (manifest.js:55)
    at Object.<anonymous> (main.js:7345)
    at __webpack_require__ (manifest.js:55)

I've checked everywhere online and I've not been able to come up with a solution. Below is my package.json file package.json

{
  "private": true,
  "scripts": {
    "dev": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.19.2",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^5.0.1",
    "jquery": "^3.5.1",
    "laravel-mix": "^1.7.2",
    "lodash": "^4.17.19",
    "vue": "^2.1.10"
  },
  "dependencies": {
    "appear": "^1.0.1",
    "compass": "^0.1.1",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "fs-extra": "^9.0.1",
    "gmap3": "^7.2.0",
    "jquery-count-to": "^1.2.1",
    "jquery-countto": "^1.2.0",
    "jquery-ui": "^1.12.1",
    "jquery.appear": "^1.0.1",
    "jquery.flipster": "^1.1.2",
    "minimist": "^1.2.5",
    "node-sass": "^4.14.1",
    "owl.carousel": "^2.3.4",
    "pogo-slider": "^0.7.0"
  }
}

I've tried a number of things, like editing the line in the file which is basically a harmless require(ext.path) and also comparing my version of the file node-sass/lib/bindings.js to what's on github for the package and it's identical. So I'm very confused as I've not been able to see any reference for the identical issue attended to. Would appreciate some help with this as I've been battling this for two days.

via Chebli Mohamed