Error: PrismaClient is unable to be run in the browser.

[Deleted user]

Bug description

I'm integrating Prisma into a Next.js application. I have connected to a mysql database, and am able to access all the content defined in my scheme through Prisma Studio. However, when I attempt to use PrismaClient in a page I receive the error PrismaClient is unable to be run in the browser.

How to reproduce

1. Install @prisma/cli and @prisma/client to a next.js application. Run prisma init, connect to a database, and define a schema.
2. Run prisma generate.
3. Import PrismaClient into a page, and instantiate it with const prisma = new PrismaClient();
4. Create a getServerSideProps function, like so:

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

const prisma = new PrismaClient({ log: ['query', 'info', 'warn'] });

export const getServerSideProps = async () => {
  const dealers = await prisma.crm_dealers.findMany();

  return {
    props: { dealers },
  };
};

5. Start up the dev server, and load the page in browser. You should see the error Error: PrismaClient is unable to be run in the browser.

Expected behavior

Expecting the PrismaClient to run in the browser.

Prisma information

My Schema:

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

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

model crm_dealers {
  id                                     Int           @id @default(autoincrement())
  owner_user_id                          Int?
  dealer_code                            String?
  name                                   String?
  company_picture                        String        @default("company_blank.png")
  URL                                    String?
  address                                String?
  city                                   String?
  state                                  String?
  zip                                    String?
  phone                                  String?
  hrs_mf                                 String?
  hrs_sat                                String?
  hrs_sun                                String?
  owner                                  String?
  sales_email                            String?
  dealer_emails                          String?
  google_email                           String?
  google_cal_embed                       String?
  angies_list                            String?
  facebook                               String?
  google_plus                            String?
  houzz                                  String?
  yelp                                   String?
  callrail_id                            String        @default("-1")
  callrail_company_id                    String
  contractor_num                         String?
  subdomain                              String?
  geo_area                               String?
  page_title                             String?
  meta_description                       String?
  meta_keywords                          String?
  meta_geo_position                      String?
  meta_geo_placename                     String?
  meta_geo_region                        String?
  maps_embed                             String?
  sm_maps_embed                          String?
  corp_ga                                String?
  dealer_ga                              String?
  min_level_see_sales                    Int           @default(3)
  active                                 Int           @default(1)
  last_update                            DateTime      @default(now())
  crm_lp_mgmt                            crm_lp_mgmt[]

  @@index([URL], name: "URL")
  @@index([owner_user_id], name: "dealers_owner_user_id_idx")
}

model crm_door_styles {
  id             Int    @unique
  style          String
  po_csv_name    String
  supplier       Int
  product_number String
  texture        String @default("Smooth")
}

model crm_lp_mgmt {
  id          Int          @id @default(autoincrement())
  active      Int?         @default(1)
  dealer_id   Int?
  tracker_id  String?
  subdomain   String
  account     String       @default("Manual")
  type        String?      @default("")
  product     String?
  URL_ext     String?
  promo       Int?         @default(0)
  year        Int          @default(0)
  campaign    String?
  phone       String?
  show_info   String?      @default("N")
  circulation Int          @default(0)
  ad_cost     Float
  CPM         Float
  placement   String?
  notes       String?
  ad_title    String       @default("")
  ad_body     String?
  ad_filename String       @default("")
  last_update DateTime     @default(now())
  crm_dealers crm_dealers? @relation(fields: [dealer_id], references: [id])

  @@index([dealer_id], name: "lp_mgmt_dealer_id_idx")
  @@index([tracker_id], name: "lp_mgmt_tracker_id_idx")
}

Environment & setup

• OS: MacOs
• Database: MySQL
• Node.js version: v12.14.1
• Prisma version:

@prisma/cli          : 2.13.1
@prisma/client       : 2.13.1
Current platform     : darwin
Query Engine         : query-engine fcbc4bb2d306c86c28014f596b1e8c7980af8bd4 (at node_modules/@prisma/engines/query-engine-darwin)
Migration Engine     : migration-engine-cli fcbc4bb2d306c86c28014f596b1e8c7980af8bd4 (at node_modules/@prisma/engines/migration-engine-darwin)
Introspection Engine : introspection-core fcbc4bb2d306c86c28014f596b1e8c7980af8bd4 (at node_modules/@prisma/engines/introspection-engine-darwin)
Format Binary        : prisma-fmt fcbc4bb2d306c86c28014f596b1e8c7980af8bd4 (at node_modules/@prisma/engines/prisma-fmt-darwin)
Studio               : 0.329.0

Please let me know, I'm on a fairly tight deadline here. Thanks!

[William Luke]

Hey @jrandallw the Prisma Client is unable to be run on the client-side. What is available on the client-side is Enums and Types.

That being said your code here using getServerSideProps should work as it is run on the server but I suspect that NextJS is not removing const prisma = new PrismaClient({ log: ['query', 'info', 'warn'] }); on the client side.
Could you try following this arch?

• lib/prisma.ts
• pages/x.tsx

[Deleted user]

Thanks for the response! I tried that out, but I'm still getting the same error. Anything else I should try?

[Deleted user]

I have a custom _app.js set up right now. Am I reading the documentation correctly that custom _app cant' use getServerSideProps? If so, do you know where I could be pointed for integrating a custom app layout without breaking getServerSideProps?

[Harshit Pant]

@jrandallw Just try abstracting out the layout into a separate component and passing other sub components into it as children. I think that should work and you can use that in _app

[Matt Mueller]

@jrandallw does

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

- const prisma = new PrismaClient({ log: ['query', 'info', 'warn'] });

export const getServerSideProps = async () => {
+ const prisma = new PrismaClient({ log: ['query', 'info', 'warn'] }); 
  const dealers = await prisma.crm_dealers.findMany();

  return {
    props: { dealers },
  };
};

Fix Error: PrismaClient is unable to be run in the browser.?

And if that's not desirable, please let us know why :-)

[Deleted user]

@matthewmueller that worked. Thank you!