Remix项目中.server.ts内PrismaClient为何在客户端运行报错？

可能的原因及排查方向 #

• 服务端代码被意外引入客户端逻辑：检查app/routes/auth/login.tsx，如果在组件渲染逻辑、useEffect等客户端钩子，或者前端事件处理函数中调用了login函数，Remix会把相关依赖打包到客户端，进而触发Prisma的报错。只有在action或loader这类服务端专属函数里调用服务端代码才是安全的。
• 服务端文件命名不符合约定：确认session.server.ts和db.server.ts的后缀是严格的.server.ts，拼写、大小写不能出错——Remix完全依赖这个后缀来识别并排除客户端打包的服务端文件。
• Prisma实例化逻辑存在泄露路径：检查db.server.ts的代码，是否导出了会被客户端间接引入的内容，比如某个被客户端组件导入的函数，内部触发了PrismaClient的实例化。

修复步骤 #

1. 严格限制服务端代码的调用范围：login函数只能在action或loader函数内部调用，绝对不能出现在组件渲染逻辑或客户端钩子中。示例：

   // 正确用法：仅在服务端action中调用login
   export async function action({ request }: ActionFunctionArgs) {
     const formData = await request.formData();
     await login(formData.get("email") as string, formData.get("password") as string);
     // 后续逻辑
   }
   
   export default function LoginPage() {
     // 错误：此处调用login会被打包到客户端，必须避免
     // await login(...)
     return <form method="post">...</form>;
   }
   

2. 校验服务端文件名：确保session.server.ts和db.server.ts的命名完全符合规则，没有拼写错误或格式偏差。
3. 规范db.server.ts的导出内容：只导出服务端专属的db实例，不要导出任何可能被客户端调用的内容。示例：

   // db.server.ts
   import { PrismaClient } from "@prisma/client";
   
   let db: PrismaClient;
   
   if (process.env.NODE_ENV === "production") {
     db = new PrismaClient();
   } else {
     if (!global.db) {
       global.db = new PrismaClient();
     }
     db = global.db;
   }
   
   export { db };
   

4. 清理缓存重新构建：删除.remix或build文件夹，重新执行npm run dev，避免缓存导致的打包异常。

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