MVC项目集成Vue时webpack.config.js报错：找不到fs/promises模块

我正在把Vue.js集成到需要保留独立页面的现有MVC项目中，大部分功能正常，但在Visual Studio用Task Runner运行时出错。当前Node版本v19.0.1，NPM版本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.

项目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"
  }
}

解决方案 #

1. 核心原因 #

报错Cannot find module 'fs/promises'是因为babel-loader@9.x依赖Node.js v14.14.0+才内置的fs/promises模块，但你的环境可能存在Node版本不一致（比如Visual Studio Task Runner调用了旧版Node），或依赖包冲突的问题。

2. 修复步骤 #

方式一：降级babel-loader到兼容版本

babel-loader@8.x不依赖fs/promises，适合版本兼容性场景：

npm uninstall babel-loader
npm install babel-loader@8.3.0 --save-dev

方式二：确保Visual Studio使用正确的Node版本

• 打开Visual Studio的工具 > 选项 > 项目和解决方案 > Web包管理 > 外部Web工具
• 将$(PATH)移到列表最上方，确保优先使用系统安装的Node（v19.0.1），而非Visual Studio内置的旧版本

方式三：清理依赖并重新安装

删除node_modules和锁文件，解决潜在包冲突：

rm -rf node_modules package-lock.json
npm install

方式四：移除冗余依赖

你的package.json同时安装了新旧版babel核心包和预设包，还有无效的nodejs包，这些会导致冲突，建议删除：

npm uninstall babel-core babel-preset-env nodejs

内容的提问来源于stack exchange，提问作者Minority