使用Parcel/Webpack时@material-ui/styles重复实例问题求助

我之前也碰到过一模一样的情况，明明配置了peerDependency却还是出现重复实例，折腾了好一阵才搞定，给你几个靠谱的解决方向：

1. 先检查自定义包的依赖配置 #

首先确保你的自定义包只在peerDependencies里声明@material-ui/styles，绝对不能在dependencies或devDependencies里重复加它！打开自定义包的package.json，看看是不是不小心在开发时把它装成了常规依赖——这是最常见的坑，一旦子包自己装了这个依赖，打包工具就会优先用它，而不是宿主项目的版本。

2. 清理依赖环境，重新安装 #

有时候缓存或旧的依赖结构会搞鬼，先彻底清一遍：

• 删除主项目和自定义包的node_modules文件夹
• 清除包管理器缓存：

  # npm
  npm cache clean --force
  # yarn
  yarn cache clean
  

• 回到主项目重新执行npm install或yarn install

3. 强制包管理器统一依赖版本 #

用包管理器的版本锁定功能，强制所有依赖（包括你的自定义包）使用主项目里的@material-ui/styles版本：

• npm 8+：在主项目的package.json里添加overrides字段：

  "overrides": {
    "@material-ui/styles": "$@material-ui/styles"
  }
  

• Yarn：添加resolutions字段：

  "resolutions": {
    "@material-ui/styles": "^x.y.z" // 这里填你主项目里的版本号
  }
  

这个配置会告诉包管理器，不管哪个依赖请求@material-ui/styles，都统一用你指定的版本，从根源上避免多实例。

4. 调整本地包的引入方式 #

如果你是用npm link或yarn link引入自定义包的，可能会因为链接路径的问题导致解析异常。试试换成file依赖的方式：
在主项目的package.json里把自定义包的依赖改成：

"your-custom-package": "file:../path/to/your/custom/package"

然后重新安装，这样Parcel会更准确地识别子包的peerDependency需求。

5. 验证是否解决 #

最后可以用命令检查依赖树，确认只有一个版本的@material-ui/styles：

# npm
npm ls @material-ui/styles
# yarn
yarn list @material-ui/styles

如果输出里只有主项目根目录下的一个版本，就说明问题解决了。

为什么会出现这个问题？ #

其实peerDependency的共享逻辑是需要包管理器和打包工具配合的，有时候子包的依赖结构（比如不小心装了依赖）、本地链接的路径问题，或者打包工具的解析策略，都会导致它没有正确复用宿主项目的依赖，反而重新打包了一份。上面的方法就是从依赖配置、包管理器策略、引入方式这几个维度去堵这些漏洞。

内容的提问来源于stack exchange，提问作者Łukasz Jagodziński