WalletConnect v2.0 库与 Shadow-cljs 的集成问题

Question

我目前正在尝试在带有shadow-cljs的clojuscript项目中使用Web3Modal SDK使用WalletConnect v2.0库。为此，我遵循独立安装：Web3Modal 独立安装

我使用 npm 安装了库：

npm install @walletconnect/sign-client @web3modal/standalone    

在我的代码中导入包后：

(ns project.view
  (:require
   ["@web3modal/standalone" :refer [Web3Modal]]
   ["@walletconnect/sign-client" :refer (SignClient)]))

因此，我尝试使用所需的配置创建模态对象：

(let [modal    (Web3Modal. modal-config)]
  ...
)

并且创建该实例时出现错误。 Javascript 项目中未出现的错误。在控制台中我可以读到：

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

查看引发错误的文件后，我意识到是与 @web3modal/standalone 库相对应的 由 Shadow-cljs 生成的 JavaScript 文件出现了问题。事实上，正是在这段代码中，在 @web3modal/ui 上调用等待的异步方法级别引发了错误。

当我们查看与输出语言选项对应的shadow-cljs文档时，我们可以看到以下警告消息：

请注意，这主要影响从 npm 或

.js

文件从 classpath 导入的 JS 代码。 CLJS 目前仅生成 ES5 *(*ECMAScript 2009) 输出，并且不受设置更高选项的影响。

知道从 npm 导入的 @web3modal/standalone 库中导致问题的部分代码位于 await 级别，并且 await/sync 是随 ECMAScript 2017 引入的，是吗？可能是shadow-cljs通过npm导入的库编译导致无法使用这个库？

如果问题来自于 npm 导入的库的编译，还有其他方法可以解决这个限制吗？

我尝试使用 :output-feature-set 但正如警告消息中提到的，从 npm 安装的库不会受到配置的影响。

我尝试使用WalletConnect V2.0的React、HTML和独立配置。在纯JavaScript项目中，库中没有错误。然而，当我切换到带有 shadow-cljs 的项目时，无论使用什么配置，我都会系统地收到错误。

通过在await级别修改npm库的源代码，shadow-cljs生成的代码不再引发任何错误。但这个解决方案只是暂时的，可以在本地使用。

npm导入的调用await的库的index.js文件是这个：

    import {ModalCtrl as r, ThemeCtrl as n, ConfigCtrl as l, OptionsCtrl as s} from "@web3modal/core";
    
        [...]
    
        async initUi() {
            if (typeof window < "u") {
                await import("@web3modal/ui");
                const e = document.createElement("w3m-modal");
                document.body.insertAdjacentElement("beforeend", e), s.setIsUiLoaded(!0)
            }
        }
    }
    
    export {f as Web3Modal};
    //# sourceMappingURL=index.js.map

Answer 1

@web3modal/standalone

包似乎尝试通过

@web3modal/ui

动态加载

await import("@web3modal/ui");

包。目前，这在

shadow-cljs

（或者更确切地说是闭包编译器）中的支持非常有限。

如果您在

(:require ["@web3modal/ui"])

需求之前添加手册

["@web3modal/standalone"]

可能会起作用。这将急切地提供包，这可能会起作用。

然而，可能还有其他地方也做过这样的事情。我建议使用

:js-provider :external

代替。