reagent 2023-09-22 | Slack Archive

Alexandre EL-KHOURY09:09:46

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-KHOURY09:09:53

(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-KHOURY09:09:09

in js it looks like this :

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

p-himik09:09:13

Have you tried searching that warning text in this channel?

Alexandre EL-KHOURY09:09:36

mm no :thinking_face:

Alexandre EL-KHOURY09:09:08

Do you see some obvious error in my code ? @U2FRKM4TW

p-himik09:09:25

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-himik09:09:08

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

Artur Angiel09:09:40

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

Alexandre EL-KHOURY09:09:38

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

p-himik09:09:14

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

👍 1

Alexandre EL-KHOURY09:09:52

[:f> Signature] didnt work too

p-himik09:09:09

What is the error this time?

Alexandre EL-KHOURY09:09:56

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-himik09:09:33

[: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-KHOURY09:09:19

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

👍 1

manas_marthi19:09:31

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_marthi20:09:43

(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_marthi20:09:19

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

2023-09-22

Channels