P
Prisma•2d ago
grace charles

Anyone have Prisma ORM working with React Router 7? I get Internal server error

Following the documentation here https://www.prisma.io/docs/guides/react-router-7 except using my own postgres instance rather than hosted cloud version. But as soon as I use import prisma from "~/lib/prisma" in a route I get [vite] Internal server error: exports is not defined on ...app/generated/prisma/index-browser.js:4:23). RR 7.5.0. Prisma 6.6.0.
How to use Prisma ORM and Prisma Postgres with React Router 7 | Pri...
Learn how to use Prisma ORM and Prisma Postgres in a React Router 7 app.
2 Replies
Prisma AI Help
Prisma AI Help•2d ago
Skipping coffee for instant knowledge! Let's brew that AI answer now. The error you're encountering is a common issue when using Prisma with browser-based environments. Prisma Client is designed to run in Node.js environments and cannot be executed directly in the browser. The error [vite] Internal server error: exports is not defined occurs because Vite is trying to use the browser version of Prisma Client, which isn't fully compatible with the browser environment. There are a few solutions to this issue: 1. Use Server Components or API Routes When using React Router 7, you should only use Prisma in server-side code. This means: - For server components or loaders marked with use server - In API routes that run on the server 2. Specify a Local Output Location As mentioned in the documentation, you should specify a local output location for your Prisma Client rather than using the default location in node_modules: 
generator client {
  provider = "prisma-client-js"
  output   = "../app/generated/prisma"
}
generator client {
  provider = "prisma-client-js"
  output   = "../app/generated/prisma"
}
Then import it from this location: 
import { PrismaClient } from "../generated/prisma";
import { PrismaClient } from "../generated/prisma";
3. Configure Vite You may need to configure Vite to exclude Prisma from its bundling process. Add this to your vite.config.ts: 
export default defineConfig({
  // other config
  optimizeDeps: {
    exclude: ['.prisma/client']
  },
  // other config
})
export default defineConfig({
  // other config
  optimizeDeps: {
    exclude: ['.prisma/client']
  },
  // other config
})
4. Use the Latest React Router Version This issue has been addressed in React Router v7.1.2 and later. Make sure you're using the latest version of React Router, as mentioned in this GitHub issue. 5. For NextJS Users If you're using NextJS, make sure to add "use server" at the top of your file when using the App Router, or keep your Prisma code inside the /api directory when using the Pages Router, as noted in this GitHub issue. Remember that Prisma Client is designed to run on the server, not in the browser. The error you're seeing is because Vite is trying to bundle Prisma for browser use, which isn't supported. I hope this helps resolve your issue! 🤔 Alright, thanks for letting us know that there's still some help needed. A team member will reply to you shortly. In the meantime, please let us know any additional info, questions, or which parts of the answer may need clarification.
grace charles
grace charlesOP•2d ago
Digging around in the index-browser.js file I think I found the problem ... we're importing PrismaClient from ../generated/prisma. Once I changed that to @prisma/client then it started working. Might want to update the documentation on that.

Did you find this page helpful?