13 replies

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>

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

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>

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

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads