Cloudflare DevelopersCD
Cloudflare Developers•2y ago
Ian

Hi folks, also posted this in Clerk's Discord but this seems related to CloudPages too so hoping som

Hi folks, also posted this in Clerk's Discord but this seems related to CloudPages too so hoping someone may be able to help.

The following code will run correctly if I use the Clerk 5.1.6 libraries but not on 5.2.6. If I comment out 'export const runtime= 'experimental-edge' it builds / runs, but not if uncommented. I'm running on Cloudflare Pages which won't build unless I have 'export const runtime= 'experimental-edge' in test.tsx. I also get hydration errors running locally in dev mode unless I comment it out.

I've dug around a lot - can't fix it. Made this ultra simple page in an attempt to eliminate as much as possible. I assume I'm making a mistake here? Grateful for any pointers / help. App is wrapped in <ClerkProvider>, using the Pages Router, middleware file configured as per docs using latest middleware and have protected routes including /test.

import { getAuth, buildClerkProps } from "@clerk/nextjs/server";
import { GetServerSideProps } from "next";
import { ReactElement } from "react";

interface TestProps {
  userId: string | null;
}

export const runtime = 'experimental-edge';

const Test = ({ userId }: TestProps): ReactElement => {
  return (
    <div>
      <h1>User Data</h1>
      <p>User ID: {userId || "Not signed in"}</p>
    </div>
  )
}

export default Test;

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const { userId } = getAuth(ctx.req);

  return { 
    props: { 
      userId: userId || null,
      ...buildClerkProps(ctx.req)
    } 
  };
};
Was this page helpful?