RCan't use <Authenticated> component from convex/react-clerk
Perhaps this is just me still being a React noob, but I'm getting the following error when I try to use the
I suppose either the type signature is wrong, or I'm doing something wrong in using the component.
Here's the code for the component where it's being used:
<Authenticated><Authenticated> component in a React component:'Authenticated' cannot be used as a JSX component.
Its return type 'ReactNode' is not a valid JSX element.
Type 'undefined' is not assignable to type 'Element | null'. (tsserver 2786)'Authenticated' cannot be used as a JSX component.
Its return type 'ReactNode' is not a valid JSX element.
Type 'undefined' is not assignable to type 'Element | null'. (tsserver 2786)I suppose either the type signature is wrong, or I'm doing something wrong in using the component.
Here's the code for the component where it's being used:
function App() {
const data = useLoaderData<typeof loader>();
const navigate = useNavigate();
const convexReactClient = new ConvexReactClient(data.ENV.CONVEX_URL);
return (
<html lang="en">
<head>
<Meta />
<Links />
</head>
<body style={{ fontFamily: "Poppins" }}>
<ClerkProvider
publishableKey="pk_test_..."
navigate={navigate}
appearance={{
layout: {
logoPlacement: "none",
},
}}
>
<ConvexProviderWithClerk client={convexReactClient}>
<Outlet />
<Authenticated>
<StoreUser />
</Authenticated>
<ScrollRestoration />
<script
dangerouslySetInnerHTML={{
__html: `window.ENV = ${JSON.stringify(data.ENV)}`,
}}
/>
<Scripts />
<LiveReload />
</ConvexProviderWithClerk>
</ClerkProvider>
</body>
</html>
);
}function App() {
const data = useLoaderData<typeof loader>();
const navigate = useNavigate();
const convexReactClient = new ConvexReactClient(data.ENV.CONVEX_URL);
return (
<html lang="en">
<head>
<Meta />
<Links />
</head>
<body style={{ fontFamily: "Poppins" }}>
<ClerkProvider
publishableKey="pk_test_..."
navigate={navigate}
appearance={{
layout: {
logoPlacement: "none",
},
}}
>
<ConvexProviderWithClerk client={convexReactClient}>
<Outlet />
<Authenticated>
<StoreUser />
</Authenticated>
<ScrollRestoration />
<script
dangerouslySetInnerHTML={{
__html: `window.ENV = ${JSON.stringify(data.ENV)}`,
}}
/>
<Scripts />
<LiveReload />
</ConvexProviderWithClerk>
</ClerkProvider>
</body>
</html>
);
}
