Page Routing模式下使用ConvexProviderWithClerk遇模块导出错误求助

我正在参考Convex官方文档配置与Clerk的集成，文档示例采用Next.js App Router模式。将代码修改为适配Page Router模式后，出现以下错误：

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).

我的代码如下：

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

核心原因 #

Page Router模式下，根布局文件若默认作为服务器组件运行，无法兼容依赖客户端上下文的ConvexProviderWithClerk和useAuth，触发RSC相关模块解析错误。

修复步骤 #

1. 标记组件为客户端组件
   在文件顶部添加'use client'指令，强制组件在客户端环境执行：

   'use client';
   import type { Metadata } from "next";
   import "./globals.css";
   // ... 其余导入代码不变
   

2. 调整Convex客户端初始化逻辑
   用useMemo缓存Convex客户端实例，避免重复创建：

   import { useMemo } from 'react';
   
   export default function RootLayout({ children }: RootLayoutProps) {
     const convex = useMemo(() => {
       return new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);
     }, []);
   
     // ... 其余渲染代码不变
   }
   

3. 确认Page Router文件结构
   Page Router的根入口应为pages/_app.tsx，而非App Router的app/layout.tsx。若文件结构混用，需调整为标准Page Router结构：

   • 根组件：pages/_app.tsx
   • 页面文件放置在pages/目录下

4. 更新依赖版本
   确保convex、@clerk/clerk-react和next版本兼容，执行更新命令：

   npm update convex @clerk/clerk-react next
   

内容的提问来源于stack exchange，提问作者petercli