无法在Ionic v5项目中使用@walletconnect/sign-client的问题求助

问题根源 #

你的Angular 9（搭配Webpack 4）默认不会转译node_modules目录下的第三方包，但@walletconnect/sign-client v2.1.0的代码使用了Angular 9默认配置不支持的ES新语法，导致Webpack无法解析该模块，从而抛出加载错误。

解决方案（无需额外安装特殊loader） #

只需调整Angular的构建配置，让它转译WalletConnect相关包即可，以下是两种可行方案：

方案一：自定义Webpack配置 #

1. 在项目根目录创建webpack.config.js文件，写入以下内容：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        // 仅转译@walletconnect开头的包，排除其他node_modules内容
        exclude: /node_modules(?!\/@walletconnect)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

2. 安装babel相关依赖：

npm install @babel/core @babel/preset-env babel-loader --save-dev

3. 修改angular.json，在项目的build配置中引入自定义Webpack文件：
   找到projects -> [你的项目名称] -> architect -> build -> options，添加如下字段：

"webpackConfig": "./webpack.config.js"

4. 重启开发服务：

ionic serve

方案二：调整TypeScript与Angular配置 #

如果不想自定义Webpack，可通过修改配置让Angular兼容该包：

1. 编辑tsconfig.json，修改配置项：

{
  "compilerOptions": {
    "allowJs": true,
    // 保留其他原有配置
  },
  "include": [
    "src/**/*",
    "node_modules/@walletconnect/**/*"
  ]
}

2. 编辑angular.json，在build -> options中添加允许的CommonJS依赖：

"allowedCommonJsDependencies": [
  "@walletconnect/sign-client",
  "@walletconnect/jsonrpc-types",
  "@walletconnect/types"
]

3. 重启开发服务即可。

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