[SOLVED] Page Routing with ConvexProviderWithClerk?

Page Routing with ConvexProviderWithClerk?

I am trying to follow the Convex wiki for configuring with Clerk. The example uses App Routing. https://docs.convex.dev/auth/clerk#nextjs-react-native-expo-gatsby

I modified the code for page routing and got this error :

var [ClerkInstanceContext, useClerkInstanceContext] = createContextAndHook("ClerkInstanceContext");
The export default was not found in module [project]/node_modules/swr/dist/infinite/react-server.mjs [app-rsc] (ecmascript).

Here is my code:

import type { Metadata } from "next";
import "./globals.css";
import { Inter } from 'next/font/google';
 
import Header from './components/header';
//import { ConvexClientProvider } from "./components/ConvexClientProvider";
import { ConvexReactClient } from "convex/react";
import { ConvexProviderWithClerk } from "convex/react-clerk";
import {  ClerkProvider, useAuth } from "@clerk/clerk-react";

const inter = Inter({ subsets: ['latin'] });



const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);

const  PUBLISHABLE_KEY=process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
if (!PUBLISHABLE_KEY) {
  throw new Error('Missing Publishable Key')
}

export const metadata: Metadata = {
  title: "CO0",
  description: "Dev",
};

interface RootLayoutProps {
  children: React.ReactNode;
}

export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/">     
      <html lang='en'>
        <body className={inter.className}>
          <Header/>
          <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
            {children}
            </ConvexProviderWithClerk>
        </body> 
      </html>
    </ClerkProvider>
  );
}

Solution

First Try after running npm install convex@latest @clerk/clerk-react@latest swr@latest and if not works write "use client" at the top of the RootLayout file.