prisma: next-auth: `PrismaClient is unable to be run in the browser.`

Bug description

Got this error in the prismaClient configuration file.

How to reproduce

Expected behavior

No response

Prisma information


generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url  	= env("DATABASE_URL")
  directUrl = env("DIRECT_URL")
  shadowDatabaseUrl = env("SHADOW_DATABASE_URL")
}
model Account {
  id                String  @id @default(cuid())
  userId            String
  type              String
  provider          String
  providerAccountId String
  refresh_token     String? @db.Text
  access_token      String? @db.Text
  expires_at        Int?
  token_type        String?
  scope             String?
  id_token          String? @db.Text
  session_state     String?

  user User @relation(fields: [userId], references: [id], onDelete: Cascade)

  @@unique([provider, providerAccountId])
}

model Session {
  id           String   @id @default(cuid())
  userId       String
  expires      DateTime
  sessionToken String   @unique
  accessToken  String   @unique
  createdAt    DateTime @default(now())
  updatedAt    DateTime @updatedAt
  user         User     @relation(fields: [userId], references: [id])
}

model User {
  id            String    @id @default(cuid())
  name          String?
  email         String?   @unique
  emailVerified DateTime?
  image         String?
  createdAt     DateTime  @default(now())
  updatedAt     DateTime  @updatedAt
  accounts      Account[]
  sessions      Session[]
}

model VerificationRequest {
  id         String   @id @default(cuid())
  identifier String
  token      String   @unique
  expires    DateTime
  createdAt  DateTime @default(now())
  updatedAt  DateTime @updatedAt

  @@unique([identifier, token])
}

import { PrismaClient } from '@prisma/client';

declare global {
    // eslint-disable-next-line no-var, no-unused-vars
    var cachedPrisma: PrismaClient;
}

let prisma: PrismaClient;
if (process.env.NODE_ENV === 'production') {
    prisma = new PrismaClient();
} else {
    if (!global.cachedPrisma) {
        global.cachedPrisma = new PrismaClient();
    }
    prisma = global.cachedPrisma;
}

export const db = prisma;

Environment & setup

OS: macOS
Database: PostgreSQL
Node.js version: v19.7.0

Prisma Version

prisma                  : 4.16.2
@prisma/client          : 4.16.2
Current platform        : darwin-arm64
Query Engine (Node-API) : libquery-engine 4bc8b6e1b66cb932731fb1bdbbc550d1e010de81 (at node_modules/.pnpm/@prisma+engines@4.16.2/node_modules/@prisma/engines/libquery_engine-darwin-arm64.dylib.node)
Migration Engine        : migration-engine-cli 4bc8b6e1b66cb932731fb1bdbbc550d1e010de81 (at node_modules/.pnpm/@prisma+engines@4.16.2/node_modules/@prisma/engines/migration-engine-darwin-arm64)
Format Wasm             : @prisma/prisma-fmt-wasm 4.16.1-1.4bc8b6e1b66cb932731fb1bdbbc550d1e010de81
Default Engines Hash    : 4bc8b6e1b66cb932731fb1bdbbc550d1e010de81
Studio                  : 0.484.0

About this issue

Original URL
State: closed
Created a year ago
Reactions: 1
Comments: 20 (10 by maintainers)

Most upvoted comments

Thanks everyone for participation in the discussion! With the change in 5.2.0 @millsp mentioned in the last comment, I think issue should be gone for most of the cases reported here. I am going to close this now. If you still experiencing issue in 5.2.0+ while not actually running prisma queries in browser, please, open a new issue and provide the reproduction.

SevInf on Aug 31, 2023

Can someone please help us get a working reproduction of the problem? The code snippets above might be helpful if you know Next.js and next-auth, but it would take us quite some time to put that together. It would be amazing if one of you could create a new project and implement the minimal code to show the problem - and then put it on GitHub. Thank you!

janpio on Aug 2, 2023

The same error occurred in my monorepo repository as well.

The cause was that I consolidated both frontend and backend functions into index.ts. As you all have pointed out, it was directly because I imported authOptions, but be careful as there seems to be a pattern where it’s indirectly imported.

index.ts (Bug occurs)

export { default } from "next-auth"; 
export { signIn, signOut, useSession } from "next-auth/react";
export { authOptions } from "./src/auth-options";
export { getServerSession } from "./src/get-session";

👇Fixed

client.ts

export { default } from "next-auth";
export { SessionProvider, signIn, signOut, useSession } from "next-auth/react";

server.ts

export { authOptions } from "./src/auth-options";
export { getServerSession } from "./src/get-session";

package.json

  "files": [
    "client.ts",
    "server.ts"
  ],

TakashiAihara on Jul 26, 2023

This code suggests that at some point something called new PrismaClient either in the browser-side code or somehow it was bundled incorrectly. It would help us if you could share a small repro repository with what is happening.

I know it’s not a Repo, but this error is happening to me when I try to use Prisma from a Server Function (server action) that’s being called from a Client Component in NextJS using the App Router, here’s a summary of the process:

Server Component imports Server Action (which makes use of prisma). Server Component passes this Server Action to a child Client Component as Prop. Client Component calls this server action using a React Transition. Server Action throws “PrismaClient is unabe to be run in the browser”, window object is still undefined here, since it’s running on the server.

rockgabi on Jul 12, 2023