RJ•2y ago

Can'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 <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>
  );
}

9 Replies

ballingt•2y ago

@RJ what Convex version are you using? This may have been fixed in a point release

RJOP•2y ago

0.12.2

ballingt•2y ago

nevermind then, let's see...

RJOP•2y ago

I also have some other questions/comments on the Convex Clerk docs! Would it be easier if I posted them as separate issues?

ballingt•2y ago

What's the react version you're using, and the @types/react version? hmmm either way, hard to know if they'll be the same

RJOP•2y ago

"react": "^18.2.0" and "@types/react": "^18.0.32" I'll post them separately

Michal Srb•2y ago

Sorry, this is our/TypeScript bug. The component will work but it doesn't typecheck. You can ignore the type error for now, we'll release a patch version soon with a fix for it. {/* @ts-ignore */} above the component use should do the trick

RJOP•2y ago

All good! I've already worked around it by just checking isAuthenticated in useConvexAuth instead, which is fine.

Michal Srb•2y ago

@RJ the latest convex 0.12.4 npm package includes the fixed types 🙂

Can't use <Authenticated> component from convex/react-clerk

Did you find this page helpful?