shadow-cljs集成WalletConnect v2.0 Web3Modal遇模块缺失问题求助

问题背景 #

在使用shadow-cljs构建的ClojureScript项目中，按照Web3Modal官方文档安装@walletconnect/sign-client和@web3modal/standalone后，创建Web3Modal实例时触发错误：

Uncaught (in promise) Module not provided: @web3modal/ui

纯JavaScript项目中无此问题，临时修改npm包源码移除动态import逻辑可修复，但无法作为长期方案。

原因分析 #

@web3modal/standalone内部通过**动态import（await import('@web3modal/ui')）**加载UI模块，但shadow-cljs默认会将npm包预编译为ES5格式，且不会自动追踪动态import的依赖。这导致运行时触发动态import时，@web3modal/ui模块未被打包进最终产物，从而抛出找不到模块的错误。

可行解决方案 #

1. 显式安装并预导入@web3modal/ui #

这是最直接的解决方式：

• 首先安装缺失的依赖包：

  npm install @web3modal/ui
  

• 在ClojureScript项目的入口文件或初始化代码中，提前导入@web3modal/ui模块，确保shadow-cljs将其纳入打包范围：

  ;; 方式1：CLJS require
  (require '[@web3modal.ui :as _])
  ;; 方式2：直接嵌入JS导入
  (js/import "@web3modal/ui")
  

预导入后，shadow-cljs会把@web3modal/ui打包进产物，运行时的动态import就能正常找到模块。

2. 配置shadow-cljs保留ES模块结构 #

通过修改shadow-cljs.edn的:js-options，强制@web3modal相关包以ES模块形式被处理，避免编译时破坏动态import逻辑：

:builds
{:app
 {:target :browser
  :output-dir "public/js"
  :modules {:main {:init-fn your.app/init}}
  :js-options
  {:resolve {"@web3modal/standalone" {:target :esm}
             "@web3modal/ui" {:target :esm}}
   :compiler-options {:preserve-symbols true}}}}

• :resolve指定包以ES模块目标处理，保留原有的动态import语法
• :preserve-symbols true避免编译时混淆模块名称

3. 引入外部CDN依赖（备选方案） #

如果上述方法无效，可以将@web3modal/ui作为外部库通过CDN加载：

• 在项目的HTML入口中添加CDN脚本：

  <script src="https://cdn.jsdelivr.net/npm/@web3modal/ui@latest/dist/index.umd.js"></script>
  

• 在shadow-cljs.edn中配置externs，避免编译时对全局变量的错误处理：

  :builds
  {:app
   {:target :browser
    ;; ... 其他配置
    :externs ["@web3modal/ui"]}}
  

这种方式绕过shadow-cljs的npm打包逻辑，直接使用全局环境中的UI模块。

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