webpack.config.js having error on MVC when trying to add Vue to existing project

Question

I have been following a GIThub project on how to integrate vuejs into an existing project where I need to maintain the sperate pages.

I have most of this working bar when I try to use Task Runner in visual studio I get an error.

I have the following node version installed : v19.0.1 I have NPM Version : 9.1.1

        cmd /c SET NODE_ENV=development&& webpack --mode=development --color
{
  unusedReport: './src/app/entries/unusedReport.js',
  main: './src/app/main.js'
}
asset unusedReport.js 2.92 KiB [compared for emit] (name: unusedReport)
asset main.js 2.84 KiB [compared for emit] (name: main)
./src/app/entries/unusedReport.js 39 bytes [not cacheable] [built] [code generated] [1 error]
./src/app/main.js 39 bytes [not cacheable] [built] [code generated] [1 error]
ERROR in ./src/app/entries/unusedReport.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'fs/promises'
Require stack:
- D:\GIT\Project\Web\node_modules\babel-loader\lib\cache.js
- D:\GIT\Project\Web\node_modules\babel-loader\lib\index.js
- D:\GIT\Project\Web\node_modules\loader-runner\lib\loadLoader.js
- D:\GIT\Project\Web\node_modules\loader-runner\lib\LoaderRunner.js
- D:\GIT\Project\Web\node_modules\webpack\lib\NormalModule.js
- D:\GIT\Project\Web\node_modules\vue-loader\dist\pluginWebpack5.js
- D:\GIT\Project\Web\node_modules\vue-loader\dist\plugin.js
- D:\GIT\Project\Web\node_modules\vue-loader\dist\index.js
- D:\GIT\Project\Web\webpack.config.js
- D:\GIT\Project\Web\node_modules\webpack-cli\lib\webpack-cli.js
- D:\GIT\Project\Web\node_modules\webpack-cli\lib\bootstrap.js
- D:\GIT\Project\Web\node_modules\webpack-cli\bin\cli.js
- D:\GIT\Project\Web\node_modules\webpack\bin\webpack.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)
    at Function.Module._load (internal/modules/cjs/loader.js:667:27)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (D:\GIT\Project\Web\node_modules\babel-loader\lib\cache.js:24:5)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
ERROR in ./src/app/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'fs/promises'
Require stack:
- D:\GIT\Project\Web\node_modules\babel-loader\lib\cache.js
- D:\GIT\Project\Web\node_modules\babel-loader\lib\index.js
- D:\GIT\Project\Web\node_modules\loader-runner\lib\loadLoader.js
- D:\GIT\Project\Web\node_modules\loader-runner\lib\LoaderRunner.js
- D:\GIT\Project\Web\node_modules\webpack\lib\NormalModule.js
- D:\GIT\Project\Web\node_modules\vue-loader\dist\pluginWebpack5.js
- D:\GIT\Project\Web\node_modules\vue-loader\dist\plugin.js
- D:\GIT\Project\Web\node_modules\vue-loader\dist\index.js
- D:\GIT\Project\Web\webpack.config.js
- D:\GIT\Project\Web\node_modules\webpack-cli\lib\webpack-cli.js
- D:\GIT\Project\Web\node_modules\webpack-cli\lib\bootstrap.js
- D:\GIT\Project\Web\node_modules\webpack-cli\bin\cli.js
- D:\GIT\Project\Web\node_modules\webpack\bin\webpack.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)
    at Function.Module._load (internal/modules/cjs/loader.js:667:27)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (D:\GIT\Project\Web\node_modules\babel-loader\lib\cache.js:24:5)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
webpack 5.75.0 compiled with 2 errors in 245 ms
Process terminated with code 1.

I have the following package.json:

        {
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --port 8086",
    "build": "cross-env NODE_ENV=production webpack --mode=production --progress --hide-modules"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.2.0",
    "@fortawesome/free-brands-svg-icons": "^6.2.0",
    "@fortawesome/free-regular-svg-icons": "^6.2.0",
    "@fortawesome/free-solid-svg-icons": "^6.2.0",
    "@fortawesome/vue-fontawesome": "^3.0.2",
    "axios": "^1.1.3",
    "foundation-sites": "^6.7.5",
    "loader-runner": "^4.3.0",
    "nodejs": "^0.0.0",
    "vue": "^3.2.45"
  },
  "devDependencies": {
    "@babel/core": "^7.20.2",
    "@babel/preset-env": "^7.20.2",
    "@types/node": "^18.11.9",
    "@vitejs/plugin-vue": "^3.2.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^9.1.0",
    "babel-preset-env": "^1.7.0",
    "core-js": "^3.26.1",
    "css-minimizer-webpack-plugin": "^4.2.2",
    "fs-extra": "^10.1.0",
    "fs-promise": "^2.0.3",
    "mini-css-extract-plugin": "^2.6.1",
    "sass": "^1.56.1",
    "sass-loader": "^13.2.0",
    "terser-webpack-plugin": "^5.3.6",
    "vite": "^3.2.3",
    "vue-loader": "^17.0.1",
    "vue-template-compiler": "^2.7.14",
    "webpack": "^5.75.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1",
    "what-input": "^5.2.12"
  }
}