Rails 7 + Importmap引入@walletconnect/web3-provider遇导出错误

这个错误的核心是Importmap 对 CommonJS 模块的兼容性问题，以及依赖版本不匹配：

• js-sha3 被 @walletconnect/web3-provider@1.7.5 依赖的版本是 CommonJS 规范导出，但你用 importmap pin 时可能自动拉取了该包的最新 ES 模块版本，新旧版本的导出结构不兼容。
• 即便仓库显示 keccak_256 已导出，不同版本的导出逻辑有差异：旧版用 module.exports 挂载方法，新版用 ES 模块命名导出，但钱包连接的代码仍按旧版逻辑导入，导致匹配失败。

1. 锁定 js-sha3 为钱包连接依赖的指定版本 #

首先确认 @walletconnect/web3-provider@1.7.5 依赖的 js-sha3 版本：

• 执行命令查看依赖版本：

npm show @walletconnect/web3-provider@1.7.5 dependencies

• 找到 js-sha3 的指定版本（通常为 ^0.8.0），手动 pin 该版本到 Importmap：

./bin/importmap pin js-sha3@0.8.0

2. 为 js-sha3 创建 Shim（版本锁定后仍报错时使用） #

如果锁定版本后还是导出错误，说明该版本是 CommonJS 格式，需要转换为 ES 模块适配 Importmap：

• 在 app/javascript 目录下创建 shims/js-sha3.js：

import sha3 from "js-sha3";
export const keccak_256 = sha3.keccak_256;
// 按需导出钱包连接需要的其他方法，比如 keccak_256_arrayBuffer

• 在 importmap.rb 中替换原有映射，指向自定义 Shim：

pin "js-sha3", to: "shims/js-sha3.js"

3. 调整导入逻辑 #

移除 application.js 中的全局导入，直接在需要的自定义 JS 文件中导入即可：

// 移除 application.js 里的 import "@walletconnect/web3-provider"
// 在自定义 JS 文件中直接导入
import WalletConnectProvider from "@walletconnect/web3-provider";

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