Vue.js中出现「These dependencies were not found」依赖缺失错误求助

问题背景 #

在Vue.js项目中引入@vueform/multiselect库后，先后遇到两个问题：

• 首先是Node引擎版本不兼容，已通过执行yarn add <package_name> --ignore-engines解决；
• 当前出现「These dependencies were not found」错误，具体表现为@amcharts/amcharts4内部依赖的大量core-js模块无法找到，手动安装这些模块后问题仍未解决。

错误信息如下：

These dependencies were not found:

* core-js/modules/es.array.concat in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.array.every in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.array.fill in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.array.filter in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.array.for-each in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.array.from in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.array.includes in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.array.index-of in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.array.iterator in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.array.join in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.array.map in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.array.reduce in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.array.reverse in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.array.slice in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.array.some in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.function.name in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.map in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.number.constructor in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.object.get-own-property-descriptor in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.object.get-own-property-descriptors in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.object.keys in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.object.to-string in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.promise in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.reflect.apply in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.reflect.construct in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.reflect.delete-property in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.reflect.get-prototype-of in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.regexp.exec in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.regexp.to-string in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.string.includes in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.string.iterator in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.string.match in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.string.replace in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.string.split in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.string.starts-with in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.string.trim in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.symbol in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.symbol.description in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/es.symbol.iterator in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/web.dom-collections.for-each in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js
* core-js/modules/web.dom-collections.iterator in ./node_modules/@amcharts/amcharts4/.internal/canvg/index.js

解决方案 #

1. 统一core-js版本 #

core-js@2和@3的模块路径结构差异较大，@amcharts/amcharts4通常依赖core-js@3。执行以下命令安装匹配版本：

yarn add core-js@3

2. 配置Babel自动引入Polyfill #

在项目根目录的babel.config.js中修改配置，让Babel根据代码自动引入所需的core-js模块：

module.exports = {
  presets: [
    ['@vue/cli-plugin-babel/preset', {
      useBuiltIns: 'usage',
      corejs: 3 // 与安装的core-js版本保持一致
    }]
  ]
}

3. 清理依赖缓存并重新安装 #

依赖缓存或不完整的安装可能导致模块缺失，执行以下步骤重置依赖：

# 清理yarn缓存
yarn cache clean
# 删除node_modules和lock文件
rm -rf node_modules yarn.lock
# 重新安装所有依赖
yarn install

4. 检查@amcharts/amcharts4版本兼容性 #

尝试安装指定版本的@amcharts/amcharts4，确保与当前Vue项目环境兼容：

yarn add @amcharts/amcharts4@latest

5. 排查间接依赖来源 #

若项目未直接使用@amcharts/amcharts4，可通过以下命令查看它是否由@vueform/multiselect间接引入：

yarn why @amcharts/amcharts4

如果确认无需该依赖，可通过yarn add @vueform/multiselect --ignore-dependencies @amcharts/amcharts4尝试排除（注意：可能导致multiselect部分功能异常，需测试验证）。

内容的提问来源于stack exchange，提问作者su-wan Kenobi