Vue3环境运行Fullstack Vue日历项目依赖与配置报错咨询

环境与问题背景 #

本地环境为npm 8.12.1、node v16.15.1，运行《Fullstack Vue: The Complete Guide to Vue.js》教程附带的Vue3日历应用时，执行npm install、npm run dev命令先后抛出两类错误。

报错1：依赖解析失败（ERESOLVE） #

错误日志 #

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm WARN config production Use `--omit=dev` instead.
npm WARN config production Use `--omit=dev` instead.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: babel-loader@7.1.5
npm ERR! Found: webpack@5.73.0
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"^5.72.1" from the root project
npm ERR!   peer webpack@"4.x.x || 5.x.x" from @webpack-cli/configtest@1.1.1
npm ERR!   node_modules/@webpack-cli/configtest
npm ERR!     @webpack-cli/configtest@"^1.1.1" from webpack-cli@4.9.2
npm ERR!     node_modules/webpack-cli
npm ERR!       dev webpack-cli@"^4.9.2" from the root project
npm ERR!       3 more (@webpack-cli/configtest, @webpack-cli/info, @webpack-cli/serve)
npm ERR!   6 more (css-loader, terser-webpack-plugin, vue-loader, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"2 || 3 || 4" from babel-loader@7.1.5
npm ERR! node_modules/babel-loader
npm ERR!   dev babel-loader@"^7.1.2" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: webpack@4.46.0
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"2 || 3 || 4" from babel-loader@7.1.5
npm ERR!   node_modules/babel-loader
npm ERR!     dev babel-loader@"^7.1.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\NotAgainLarry\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\NotAgainLarry\AppData\Local\npm-cache\_logs\2022-06-03T06_24_14_414Z-debug-0.log

错误原因 #

项目锁定的babel-loader@7.1.5版本仅兼容webpack 2/3/4，但项目依赖的webpack版本为5.x。npm 7及以上版本默认开启严格的peerDependencies校验，版本不匹配时会直接终止安装。之前执行的npm audit fix --force会强制升级跨大版本的依赖，反而会破坏原有依赖兼容关系，触发后续配置报错。
注意：不要随意对旧项目执行npm audit fix --force，该命令会强制升级跨大版本依赖，极易破坏项目原有依赖兼容性

修复步骤 #

1. 先删除项目目录下的node_modules文件夹和package-lock.json文件，清除之前错误安装的依赖。
2. 选择以下任意一种方式重新安装依赖：
   • 快速兼容方案：执行npm install --legacy-peer-deps，该参数会沿用npm 6的依赖解析逻辑，忽略peer依赖的版本校验，适合快速跑通旧项目。
   • 长期适配方案：打开package.json文件，将devDependencies中的babel-loader版本修改为^8.2.5（该版本同时兼容webpack4和webpack5），再执行npm install即可。

报错2：webpack devtool配置不符合schema校验 #

错误日志 #

calendar-app@1.0.0 dev > cross-env NODE_ENV=development webpack-dev-server --open --hot [[100;90m..................[0m] - 
: [32;40mtiming[0m [35mconfig:load:flatten[0m Completed in 3ms[0m[K [..................]
 - : timing config:load:fla[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. 
- configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$". BREAKING CHANGE since webpack 5: The devtool option is more strict. 
Please strictly follow the order of the keywords in the pattern. 

错误原因 #

webpack 5大幅收紧了devtool配置项的格式规则，旧项目中沿用的webpack4时代的devtool写法不符合新的校验规则。

提示"Please strictly follow the order of the keywords in the pattern"的具体含义 #

webpack5要求devtool的取值必须严格匹配正则^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$规定的关键字顺序，不能随意调换拼接顺序，规则从左到右依次为：

• 第一部分（可选）：只能三选一，取值为inline-、hidden-、eval-
• 第二部分（可选）：取值为nosources-
• 第三部分（可选）：取值为cheap-，如果使用cheap-，后面可以追加module-
• 最后一部分（必填）：必须以source-map结尾

举个常见错误例子：webpack4中广泛使用的cheap-module-eval-source-map不符合顺序要求，在webpack5中需要调整为eval-cheap-module-source-map才合法。

修复步骤 #

打开项目根目录的webpack.config.js文件，找到devtool配置项，将原有不符合规则的取值替换为合法值即可，开发环境推荐配置如下：

module.exports = {
  // 其余配置保持不变
  devtool: 'eval-cheap-module-source-map',
}

修改完成后重新执行npm run dev即可正常启动项目。

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