Angular Universal项目因依赖的依赖引发preact导出错误求助

问题原因 #

项目中多个子依赖（@walletconnect/web3-provider、onfido-sdk-ui、walletlink）分别依赖不同版本的preact（10.4.1、10.9.0、10.6.4），npm依赖解析时会将较低版本的preact提升到顶层，而preact/compat需要的_unmount是preact较新版本才有的内部导出，低版本不包含该导出，因此触发报错。

解决方案 #

1. 强制统一所有preact子依赖的版本

在项目根目录的package.json中添加resolutions字段，强制所有子依赖使用同一个兼容的preact版本（推荐10.11.0及以上，该版本包含_unmount导出）：

"resolutions": {
  "preact": "^10.11.0"
}

由于npm本身不支持resolutions，需借助npm-force-resolutions工具生效：

• 安装工具：npm install -D npm-force-resolutions
• 修改package.json的scripts，添加预处理命令：

  "scripts": {
    "preinstall": "npx npm-force-resolutions"
  }
  

• 执行清理重装：

  rm -rf node_modules package-lock.json
  npm install --legacy-peer-deps
  

2. 匹配preact/compat版本（若问题仍存在）

先检查哪个依赖引入了preact/compat：

npm ls preact/compat

找到对应依赖后，在resolutions中同步指定preact/compat的版本，确保和preact版本一致：

"resolutions": {
  "preact": "^10.11.0",
  "preact/compat": "^10.11.0"
}

重复上述清理重装步骤。

3. 升级引入preact的子依赖

尝试将依赖preact的包升级到最新版本，新版本可能已修复版本兼容问题：

npm update @walletconnect/web3-provider onfido-sdk-ui walletlink --legacy-peer-deps

升级后执行清理重装，验证问题是否解决。

4. 替换冲突依赖（可选）

若以上方法无效，可考虑替换掉部分依赖，比如寻找不依赖preact的web3 provider或身份验证SDK，从根源避免版本冲突。

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