chore(repo): Attempt to fix retheme build (#4474)

clerk · Nov 4, 2024 · d728048 · d728048
1 parent f1a855b
commit d728048
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 38 deletions.
diff --git a/.changeset/fluffy-fans-clap.md b/.changeset/fluffy-fans-clap.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/playground/nextjs/app/app-dir/client/page.tsx b/playground/nextjs/app/app-dir/client/page.tsx
@@ -4,7 +4,9 @@ import { SignedIn, SignedOut } from '@clerk/nextjs';
 export default function Page() {
   return (
     <div>
+      {/* @ts-ignore */}
       <SignedIn>Hello In</SignedIn>
+      {/* @ts-ignore */}
       <SignedOut>Hello Out</SignedOut>
     </div>
   );

diff --git a/playground/nextjs/app/app-dir/page.tsx b/playground/nextjs/app/app-dir/page.tsx
@@ -5,7 +5,7 @@ import Link from 'next/link';
 export default async function Page() {
   const { userId } = await auth();
   const currentUser_ = await currentUser();
-  const user = userId ? await clerkClient.users.getUser(userId) : null;
+  const user = userId ? await (await clerkClient()).users.getUser(userId) : null;
 
   return (
     <main>
@@ -26,6 +26,7 @@ export default async function Page() {
       <div>
         <h1>Hello, Next.js!</h1>
         {userId ? <h3>Signed in as: {userId}</h3> : <h3>Signed out</h3>}
+        {/* @ts-ignore */}
         <SignedIn>
           <UserButton
             userProfileMode='navigation'
@@ -40,6 +41,7 @@ export default async function Page() {
           <div>{JSON.stringify(user)}</div>
           <div>{JSON.stringify(currentUser_)}</div>
         </SignedIn>
+        {/* @ts-ignore */}
         <SignedOut>
           <SignIn routing='hash' />
         </SignedOut>

diff --git a/playground/nextjs/app/layout.tsx b/playground/nextjs/app/layout.tsx
@@ -7,10 +7,13 @@ export const metadata: Metadata = {
 };
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <ClerkProvider>
-      <html lang='en'>
-        <body>{children}</body>
-      </html>
-    </ClerkProvider>
+    <>
+      {/* @ts-ignore */}
+      <ClerkProvider dynamic>
+        <html lang='en'>
+          <body>{children}</body>
+        </html>
+      </ClerkProvider>
+    </>
   );
 }
diff --git a/playground/nextjs/package.json b/playground/nextjs/package.json
@@ -11,9 +11,9 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@clerk/nextjs": "beta",
-    "@clerk/themes": "beta",
-    "next": "^14.1.0",
+    "@clerk/nextjs": "canary",
+    "@clerk/themes": "canary",
+    "next": "^15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/playground/nextjs/pages/_app.tsx b/playground/nextjs/pages/_app.tsx
@@ -59,35 +59,38 @@ function MyApp({ Component, pageProps }: AppProps) {
   const C = Component as FunctionComponent;
 
   return (
-    <ClerkProvider
-      appearance={{
-        baseTheme: styleReset ? [experimental__simple, themes[selectedTheme]] : themes[selectedTheme],
-        variables: {
-          colorPrimary: primaryColor,
-        },
-        layout: {
-          animations,
-          unsafe_disableDevelopmentModeWarnings: disableDevMode,
-        },
-      }}
-      {...pageProps}
-      waitlistUrl='/waitlist'
-    >
-      <AppBar
-        onChangeTheme={e => setSelectedTheme(e.target.value as any)}
-        onToggleDark={onToggleDark}
-        onToggleSmooth={onToggleSmooth}
-        onResetStyles={() => setStyleReset(s => !s)}
-        onToggleAnimations={onToggleAnimations}
-        devMode={disableDevMode}
-        onToggleDevMode={onToggleDevMode}
-        animations={animations}
-        styleReset={styleReset}
-        smooth={selectedSmoothing}
-        onPrimaryColorChange={setPrimaryColor}
-      />
-      <C {...pageProps} />
-    </ClerkProvider>
+    <>
+      {/* @ts-ignore */}
+      <ClerkProvider
+        appearance={{
+          baseTheme: styleReset ? [experimental__simple, themes[selectedTheme]] : themes[selectedTheme],
+          variables: {
+            colorPrimary: primaryColor,
+          },
+          layout: {
+            animations,
+            unsafe_disableDevelopmentModeWarnings: disableDevMode,
+          },
+        }}
+        {...pageProps}
+        waitlistUrl='/waitlist'
+      >
+        <AppBar
+          onChangeTheme={e => setSelectedTheme(e.target.value as any)}
+          onToggleDark={onToggleDark}
+          onToggleSmooth={onToggleSmooth}
+          onResetStyles={() => setStyleReset(s => !s)}
+          onToggleAnimations={onToggleAnimations}
+          devMode={disableDevMode}
+          onToggleDevMode={onToggleDevMode}
+          animations={animations}
+          styleReset={styleReset}
+          smooth={selectedSmoothing}
+          onPrimaryColorChange={setPrimaryColor}
+        />
+        <C {...pageProps} />
+      </ClerkProvider>
+    </>
   );
 }
 
@@ -152,10 +155,12 @@ const AppBar = (props: AppBarProps) => {
       />
       <UserButton />
 
+      {/* @ts-ignore */}
       <SignedIn>
         <SignOutButton />
       </SignedIn>
 
+      {/* @ts-ignore */}
       <SignedOut>
         <SignInButton mode={'modal'} />
       </SignedOut>