引入@coinbase/wallet-sdk后Superstruct模块解析失败求助

引入@coinbase/wallet-sdk后出现编译错误：

./node_modules/superstruct/dist/index.mjs 24:23
模块解析失败：意外的标记 (24:23)
已使用以下加载器处理该文件：
 * ./node_modules/babel-loader/lib/index.js
你可能需要额外的加载器来处理这些加载器的输出结果。
|     } = failure;
|     const msg = path.length === 0 ? message : `At path: ${path.join('.')} -- ${message}`;
>     super(explanation ?? msg);
|     if (explanation != null) this.cause = msg;
|     Object.assign(this, rest);

已尝试修改tsconfig.json的lib配置：

"lib": [
      "dom",
      "dom.iterable",
      "es6",
      "ScriptHost",
      "ES2016.Array.Include"
    ]

但问题未解决，寻求技术帮助。

1. 让babel处理node_modules中的superstruct #

错误源于superstruct使用了ES2020的空值合并运算符（??），而当前babel配置未处理该模块。修改webpack配置，让babel-loader覆盖superstruct：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.(js|mjs)$/,
        include: /node_modules\/superstruct/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [['@babel/preset-env', { targets: 'defaults' }]]
          }
        }
      },
      // ...其他已存在的规则
    ]
  }
};

2. 确保babel支持ES2020语法 #

若@babel/preset-env未自动包含空值合并运算符的处理，手动安装并添加对应插件：

npm install @babel/plugin-proposal-nullish-coalescing-operator --save-dev

在babel.config.json中配置：

{
  "plugins": ["@babel/plugin-proposal-nullish-coalescing-operator"]
}

3. 更新tsconfig的编译目标和lib #

将tsconfig.json的编译目标和lib升级到ES2020及以上版本：

{
  "compilerOptions": {
    "target": "ES2020",
    "lib": [
      "dom",
      "dom.iterable",
      "ES2020"
    ]
    // ...其他配置
  }
}

修改后重启开发服务器，确保配置生效。

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