在ClojureScript中集成Tailwind-Elements React遇Hook调用错误求助

问题核心原因 #

出现「Invalid hook call」和「resolveDispatcher() is null」错误，大多是因为项目中存在多个React实例（版本不匹配或重复打包），或者组件的导入/使用方式不符合tw-elements-react的要求，导致React Hooks无法正确访问上下文环境。

具体解决方案 #

1. 统一React依赖版本 #

tw-elements-react对React版本有明确依赖，版本不兼容会直接触发Hook异常：

• 查看node_modules/tw-elements-react/package.json中的peerDependencies，确认要求的React版本范围。
• 检查项目package.json，确保react和react-dom版本与上述要求一致；若存在多个React实例，添加版本强制统一配置：

  // npm使用overrides，yarn使用resolutions
  "overrides": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
  

• 重新安装依赖：npm install或yarn install，再运行npm ls react确认依赖树中只有一个React版本。

2. 调整组件导入与使用方式 #

修改导入语法，改用命名空间引用而非直接refer组件，同时确保引入必需的样式文件：

(:require ["tw-elements-react" :as te]
          ["tw-elements-react/dist/css/tw-elements.min.css" :as te-css])

使用组件时：

[:> te/TERipple
 [:button "带波纹效果的按钮"]]

3. 修正shadow-cljs配置，避免重复打包React #

在shadow-cljs.edn的构建配置中，明确指定React模块指向npm包，防止shadow-cljs打包内部版本的React：

:builds {:app {:target :browser
               ...
               :js-options {:resolve {"react" {:target :npm}
                                     "react-dom" {:target :npm}}}}}

4. 备选方案：使用tw-elements原生JS版本 #

若React组件版本仍有问题，可改用原生JS版的tw-elements，通过初始化函数触发波纹效果：

(:require ["tw-elements" :as te])

;; 在组件挂载完成后执行初始化
(defn init-te-components []
  (te/Ripple.init))

;; 视图中给元素添加初始化属性
[:button {:data-te-ripple-init true} "带波纹效果的按钮"]

可结合re-frame的component-did-mount生命周期钩子调用init-te-components。

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