Invalid hook call when using react auth0 library.

[zendevil]

I'm using the react auth0 library, and the auth0 documentation says the usage is:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Auth0Provider } from "@auth0/auth0-react";

ReactDOM.render(
  <Auth0Provider
    domain="eirtiewrte.us.auth0.com"
    clientId="eiogcwogrnpwerucgn9wnregnc9wercgmo"
    redirectUri={window.location.origin}
  >
    <App />
  </Auth0Provider>,
  document.getElementById("root")
);

So I have the following:

(defn ^:dev/after-load mount-components []
  (rf/clear-subscription-cache!)
  (rdom/render [Auth0Provider
                {:domain "wqtqwtqewt.us.auth0.com"
                 :clientId "wlkguhkleqwlkqjewlh"
                 :redirectUri (.. js/window -location -origin)}
                [#'page]] (.getElementById js/document "app")))

But this is giving me the error:

react-dom.development.js:14907 Uncaught Error: 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
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at Object.throwInvalidHookError (react-dom.development.js:14907)
    at Object.exports.useState (react.development.js:1509)
    at cmp.exports.Auth0Provider [as reagentRender] (auth0-react.cjs.js:242)
    at eval (component.cljs:88)
    at Object.reagent$impl$component$wrap_render [as wrap_render] (component.cljs:91)
    at Object.reagent$impl$component$do_render [as do_render] (component.cljs:117)
    at eval (component.cljs:73)
    at Object.reagent$ratom$in_context [as in_context] (ratom.cljs:44)
    at Object.reagent$ratom$deref_capture [as deref_capture] (ratom.cljs:57)
    at Object.reagent$ratom$run_in_reaction [as run_in_reaction] (ratom.cljs:539)
throwInvalidHookError @ react-dom.development.js:14907
exports.useState @ react.development.js:1509
exports.Auth0Provider @ auth0-react.cjs.js:242
eval @ component.cljs:88
reagent$impl$component$wrap_render @ component.cljs:91
reagent$impl$component$do_render @ component.cljs:117
eval @ component.cljs:73
reagent$ratom$in_context @ ratom.cljs:44
reagent$ratom$deref_capture @ ratom.cljs:57
reagent$ratom$run_in_reaction @ ratom.cljs:539
re_frisk$reagent$impl$component$wrap_funs_$_render @ component.cljs:73
finishClassComponent @ react-dom.development.js:17486
updateClassComponent @ react-dom.development.js:17436
beginWork @ react-dom.development.js:19074
callCallback @ react-dom.development.js:3946
invokeGuardedCallbackImpl @ react-dom.development.js:3995
invokeGuardedCallback @ react-dom.development.js:4057
beginWork$1 @ react-dom.development.js:23965
performUnitOfWork @ react-dom.development.js:22780
workLoopSync @ react-dom.development.js:22708
renderRootSync @ react-dom.development.js:22671
performSyncWorkOnRoot @ react-dom.development.js:22294
scheduleUpdateOnFiber @ react-dom.development.js:21882
updateContainer @ react-dom.development.js:25483
eval @ react-dom.development.js:26022
unbatchedUpdates @ react-dom.development.js:22432
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26021
exports.render @ react-dom.development.js:26104
reagent$dom$render_comp @ dom.cljs:18
eval @ dom.cljs:48
eval @ dom.cljs:38
humboi$core$mount_components @ core.cljs:187
humboi$core$init_BANG_ @ core.cljs:205
eval @ app.cljs:19
goog.globalEval @ app.js:495
env.evalLoad @ app.js:1558
(anonymous) @ app.js:1922
Show 7 more frames
react-dom.development.js:20086 The above error occurred in the <reagent3> component:

    at cmp (http://localhost:3000/js/cljs-runtime/reagent.impl.component.js:496:43)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

[oxalorg]

Have you tried converting them to functional comps so that hooks can work? This specific documentation talks about it: https://github.com/reagent-project/reagent/blob/master/doc/ReactFeatures.md#function-components

To quote the docs:

JavaScript functions are valid React components, but Reagent implementation by default turns the ClojureScript functions referred in Hiccup-vectors to Class components.

However, some React features, like Hooks, only work with Functional components. There are several ways to use functions as components with Reagent:

Calling r/create-element directly with a ClojureScript function doesn't wrap the component in any Reagent wrappers, and will create functional components. In this case you need to use r/as-element inside the function to convert Hiccup-style markup to elements, or just return React Elements yourself. You also can't use Ratoms here, as Ratom implementation requires that the component is wrapped by Reagent.

:r> shortcut can be used to create components similar to r/create-element, and the children Hiccup forms are converted to React element automatically.

Using adapt-react-class or :> is also calls create-element, but that also does automatic conversion of ClojureScript parameters to JS objects, which isn't usually desired if the component is ClojureScript function.

[Deraen]

Looks like missing :> when accessing components from JS lib (Auth0Provider), or missing :f> when needing functional Reagent components.

Clojurians Slack is preferred channel for support and questions.