2025-01-15 reagent | Clojure Slack Archive

reagent

Mateusz Mazurczak 2025-01-15T17:28:35.578929Z

Hi, I'm trying to use mui toolpad (https://mui.com/toolpad/core/introduction/) But I'm keep getting invalid hook call, while my code is really simple and following reagent guidelines (I've also used reagent components and libs with hooks before, but this time it keeps failing) Code:

(ns x
(:require ["@toolpad/core" :refer [AppProvider DashboardLayout]])

(defn page
  []
  [:> AppProvider {:theme    theme
                   :navigation navigation}
   [:> DashboardLayout {:sx {:flex-grow 1}}
    [:div "hello"]]])


(defn layout []
  [:f> page])

(defn app []
  [layout])

Here is small reproduction repo: https://github.com/Kaspazza/mui-test/blob/main/src/mui_test/core.cljs

Mateusz Mazurczak 2025-01-15T17:29:33.324669Z

DashboardLayout seems to cause it, since the hooks message comes when I add it

p-himik 2025-01-15T18:03:40.580399Z

Toolpad utils has a dependency on React 19, even though it specifies a peer dependency on either 18 or 19. It leads to a nested node_modules with React 19 in @toolpad/utils. And it ends up as two Reacts on the same web page. I don't know what to do in such cases, maybe @thheller knows.

p-himik 2025-01-15T18:06:23.150219Z

Adding this to package.json fixes the issue:

"overrides": {
    "@toolpad/utils": {
      "react": "$react"
    }
  }

❤️ 1

Mateusz Mazurczak 2025-01-16T12:05:05.887519Z

Thanks so much for help. For anyone with this problem, you can run npm list react to see all deps that are using react. And removing package-lock with running npm install was not enough. I had to run npm update. Without that I was getting error from npm list that toolpad still uses react 19.

Clojurians Log v2

reagent