2023-09-22 reagent | Clojure Slack Archive

reagent

Alexandre EL-KHOURY 2023-09-22T09:13:46.827829Z

Hey, I'm new to reagent and I got this error : Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. I will send more details in the reply section.

Alexandre EL-KHOURY 2023-09-22T09:14:53.722779Z

(defn Signature []
  (let  [signMessage (.-signMessage (useSignMessage #js {:message
                                                        "gm wagmi frens"}))]
     [:button {:on-click signMessage} "Sign Message"]))

(defn Application []
    [:<>
     [:div
      [:h1 "Wallet Connect V2 Test "]
      [:div
       [:> WagmiConfig {:config wagmiConfig}
        [:> Web3Button]]
       [:> Web3Modal {:projectId projectId
                      :ethereumClient ethereumClient}]
       (Signature)]]])

Its the Signature function that is causing the error !

Alexandre EL-KHOURY 2023-09-22T09:16:09.235949Z

in js it looks like this :

const { signMessage  } = useSignMessage({
    message: 'gm wagmi frens',
  })

p-himik 2023-09-22T09:23:13.012449Z

Have you tried searching that warning text in this channel?

Alexandre EL-KHOURY 2023-09-22T09:24:36.977119Z

mm no 🤔

Alexandre EL-KHOURY 2023-09-22T09:31:08.882739Z

Do you see some obvious error in my code ? @p-himik

p-himik 2023-09-22T09:33:25.760019Z

Of course. So, have you searched for that warning text? Do the results not give you enough information to quickly figure out what's wrong?

p-himik 2023-09-22T09:34:08.330949Z

This question pops up not less often than once a month, there should be a ton of examples.

Artur Angiel 2023-09-22T09:36:40.975699Z

I'm fresh too in reagent and had the same issue. Could you try to change (Signature) to [:f> Signature] ?

Alexandre EL-KHOURY 2023-09-22T09:37:38.067429Z

You are right, there's a lot of exemples, i tried (-> Signature) same error... I will try yours @arturangiel

p-himik 2023-09-22T09:38:14.898639Z

(-> Signature) is the same as (Signature), check out (doc ->) in your REPL.

👍 1

Alexandre EL-KHOURY 2023-09-22T09:38:52.944209Z

[:f> Signature] didnt work too

p-himik 2023-09-22T09:39:09.704419Z

What is the error this time?

Alexandre EL-KHOURY 2023-09-22T09:39:56.934909Z

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app

TypeError: dispatcher is null
    useContext React
    useQueryClient QueryClientProvider.mjs:39
    useMutation useMutation.mjs:21
    useMutation index.js:365
    useSignMessage index.js:942
    <anonymous> core.cljs:15
    globalEval main.js:430
    evalLoad main.js:1387
    <anonymous> main.js:1558

p-himik 2023-09-22T09:41:33.192829Z

[:f> Signature] is the correct fix. Make sure your hot code reloading setup works properly by refreshing the page while also dropping all the cache. If that doesn't help, I'd guess this error is actually elsewhere.

Alexandre EL-KHOURY 2023-09-22T09:48:19.672869Z

yea, you are right @p-himik now I got a QueryClient error, will search for that one in the chat. Thanks !

👍 1

manas_marthi 2023-09-22T19:35:31.853859Z

Hi All, Is reagent.dom.client/createRoot ready for production. Or is it still in experimental support mode. I see people asking about this warning from a year ago Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more:

manas_marthi 2023-09-22T20:10:43.822469Z

(defn init-root
  []
  (swap! db/state assoc :root (rdomc/create-root (.getElementById js/document "app"))))

(defn ^:dev/after-load start []
  (let [root (:root @db/state)]
    (js/console.log "starting app")
    (rdomc/render root (app))))

(defn init []
  (js/console.log "init app")
  (events/init-root)
  (start))

manas_marthi 2023-09-22T20:12:19.032549Z

I got rid of that warning by storing the root in appstate and then using it render calls

Clojurians Log v2

reagent