Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

EMP3环境下,yarn出现webpack module未安装问题 #367

Open
newstart0514 opened this issue Apr 3, 2024 · 1 comment
Open

EMP3环境下,yarn出现webpack module未安装问题 #367

newstart0514 opened this issue Apr 3, 2024 · 1 comment

Comments

@newstart0514
Copy link

newstart0514 commented Apr 3, 2024

发生了什么

在使用yarn包管理器的时候,使用emp3.0创建vue项目,安装完依赖时,我们发现警告:
image

在执行dev命令的时候,我们遇到了如下错误:
image (1)

检查/node_modules/vue-loader/lib/plugin-webpack5.js,发现引入了webpack,但没有该依赖
image (2)

经过问题溯源,发现对于vue-loader源代码,使用pnpm和npm构建运行是没有问题的,webpack会被正确安装。后续我们发现vue2以及vue3插件都有类似的问题出现。

问题原因

在对npm、yarn以及pnpm三款社区流行的包管理器测试中,我们发现,三款包管理器对于peerDependencies的兼容处理不太相同。

  • NPM的处理:在NPM7及以后的版本中,默认会安装peerDependencies。当一个包被安装时,npm会尝试找到与宿主项目中已存在的依赖相兼容的peerDependencies版本。如果npm无法解析出一个兼容的版本,它可能会抛出错误或者警告。
  • Yarn的处理:yarn不会自动安装peerDependencies,并且如果发现树中的对等依赖项版本无效,则会发出警告。这意味着yarn不会主动去安装peerDependencies,而是将这个责任留给了开发者或者项目维护者。
  • PNPM的处理:pnpm的行为与npm类似,也会尝试安装与宿主项目中已存在的依赖相兼容的peerDependencies版本。pnpm在处理依赖关系时,会考虑到包的兼容性,并尝试找到最优的解决方案。

总结来说,yarn的设计理念更倾向于让开发者明确地管理他们的依赖关系,而不是自动地做出决定。

解决方案

解决方案

  • 手动添加webpack到插件的package.json中,这样在执行yarn时,它会被正确引入,而不会缺失
  • (推荐)在原有的插件的package.json中添加如下命令,使得webpack正确安装至与node版本兼容的版本,而不影响node其他版本用户的使用
"resolutions": {
    "webpack": "^4.1.0 || ^5.0.0-0"
}
  • 强制开发者使用pnpm或NPM,这种做法不推荐,可能会带来其他问题

The larger the version span, the more important it is to ensure its stability!

@ckken
Copy link
Contributor

ckken commented Apr 28, 2024

mark!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants