PrismaClient is unable to be run in the browser.

Bug description

I’m getting an Error: PrismaClient is unable to be run in the browser.

Selection_013

How to reproduce

Create new Node Project with npm init -y
install dependencies npm i next react react-dom
install prisma with npm i -D primsa and then npm i @prisma/client
init prisma with npx primsa init
change schema to :

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

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model Post {
  id        Int     @id @default(autoincrement())
  title     String
  content   String?
  published Boolean @default(false)
  author    String?
}

push schema to postgresql with npx prisma db push --preview-feature
create index.js like:

import {PrismaClient} from "@prisma/client"
export {PrismaClient} from "@prisma/client"

const prisma = new PrismaClient()

export default function Page(){
        return <div>Hello World</div>
}

run server
getting error

Expected behavior

Displaying Hello World but getting an error

Prisma information

Environment & setup

OS: Ubuntu 20.4
Database: PostgreSQL on Heroku
Node.js version: v10.19.0
Prisma version:2.19.0

Issue Analytics

State:
Created 2 years ago
Comments:16 (1 by maintainers)

Top GitHub Comments

23reactions

ninestcommented, May 13, 2021

I was having a similar issue. I think a solution is to only initialize the client once and on the server only.

import { Prisma, PrismaClient } from "@prisma/client";

declare global {
  namespace NodeJS {
    interface Global {
      prisma: PrismaClient;
    }
  }
}

let prisma: PrismaClient;

if (typeof window === "undefined") {
  if (process.env.NODE_ENV === "production") {
    prisma = new PrismaClient();
  } else {
    if (!global.prisma) {
      global.prisma = new PrismaClient();
    }

    prisma = global.prisma;
  }
}

export default prisma;

12reactions

pantharshit00commented, Mar 26, 2021

@fugohan You are trying to use Prisma on frontend which is not possible. Either use it in next js api routes: https://nextjs.org/docs/api-routes/introduction or use it in getServerSideProps or getStaticProps: https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering