Angular 16迁移WalletConnect v1到v2时@walletconnect/modal导入报错

问题详情 #

迁移WalletConnect v1到v2时，使用@walletconnect/modal出现类型导入错误，报错来自node_modules/@walletconnect/modal/dist/_types/src/client.d.ts中的两行代码：

import("packages/modal-core/dist/_types/src/controllers/ModalCtrl").OpenOptions
import("packages/modal-core/dist/_types/src/types/controllerTypes").ModalCtrlState

错误提示：

Cannot find module 'packages/modal-core/dist/_types/src/controllers/ModalCtrl' or its corresponding type declarations.

仓库源码里存在packages文件夹，但npm下载的包结构和仓库不一致，导致该路径无效。

环境版本 #

Angular及相关依赖 #

@angular-devkit/architect       0.1601.4
@angular-devkit/build-angular   16.1.4
@angular-devkit/core            16.1.4
@angular-devkit/schematics      16.1.4
@angular/cli                    16.1.4
@schematics/angular             16.1.4
ng-packagr                      16.1.0
rxjs                            7.8.1
typescript                      5.1.6

Angular CLI: 16.1.4
Node: 19.6.0
Package Manager: npm 9.4.0

WalletConnect包版本 #

"@walletconnect/ethereum-provider": "^2.9.0",
"@walletconnect/modal": "^2.6.0"

可行解决方法 #

1. 临时修改node_modules路径
   直接修改node_modules/@walletconnect/modal/dist/_types/src/client.d.ts中的导入路径，将packages/modal-core/替换为相对路径../../../../modal-core/，修改后代码如下：

import("../../../../modal-core/dist/_types/src/controllers/ModalCtrl").OpenOptions
import("../../../../modal-core/dist/_types/src/types/controllerTypes").ModalCtrlState

注意：每次执行npm install后该修改会被覆盖，需要重新操作。

2. 绕过类型检查
   将报错的类型声明替换为any，虽然会丢失类型提示，但功能可以正常运行。

3. 长期修复方案
   fork WalletConnect Modal官方仓库，修正类型文件中的导入路径为正确的相对路径，之后使用自己fork的包；或者等待官方发布修复版本。

问题根源 #

这是WalletConnect官方打包过程中的路径错误，仓库源码里的导入路径在打包后未正确转换，导致npm包中的类型导入指向了不存在的packages/路径，而实际包结构中modal-core作为独立依赖，需要用相对路径或正确的包内路径导入。

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