Can not use Prisma from project using Vite

Bug description

Using Prisma with Vite does not work. It errors during dev server and during build.

During dev command:

2:28:07 pm [vite] Error when evaluating SSR module /node_modules/.pnpm/@prisma+client@2.20.1_prisma@2.20.1/node_modules/@prisma/client/index-browser.js:
ReferenceError: require is not defined
    at /node_modules/.pnpm/@prisma+client@2.20.1_prisma@2.20.1/node_modules/@prisma/client/index-browser.js:1:16
    at instantiateModule (/Users/choc/code/sp/kit/node_modules/.pnpm/vite@2.1.5/node_modules/vite/dist/node/chunks/dep-66eb515d.js:69030:166)

During build command:

> Using @sveltejs/adapter-node
> Cannot find module '/Users/choc/code/sp/kit/node_modules/.prisma/client/index-browser' imported from /Users/choc/code/sp/kit/.svelte/output/server/app.js
Did you mean to import /Users/choc/code/sp/kit/node_modules/.prisma/client/index-browser.js?
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/choc/code/sp/kit/node_modules/.prisma/client/index-browser' imported from /Users/choc/code/sp/kit/.svelte/output/server/app.js
Did you mean to import /Users/choc/code/sp/kit/node_modules/.prisma/client/index-browser.js?
    at new NodeError (node:internal/errors:329:5)
    at finalizeResolution (node:internal/modules/esm/resolve:323:11)
    at moduleResolve (node:internal/modules/esm/resolve:758:10)
    at Loader.defaultResolve [as _resolve] (node:internal/modules/esm/resolve:869:11)
    at Loader.resolve (node:internal/modules/esm/loader:88:40)
    at Loader.getModuleJob (node:internal/modules/esm/loader:241:28)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:57:40)
    at link (node:internal/modules/esm/module_job:56:36)
 ERROR  Command failed with exit code 1.

It seems there may be something to do with how Prisma package is done that is causing issues with Vite.

I saw an issue on the Vite repo with some information but from what they’re saying it looks like it’s because of how Prisma uses commonjs? Things might work if Prisma used es modules instead?

This issue talked about how prisma needed node builtins which broke the build

How to reproduce

Following this Prisma guide: Add to existing project.

Generate a Svelte Kit app (runs on Vite).

mkdir my-app
cd my-app
npm init svelte@next
npm install
npm run dev

Install Prisma: npm install -D prisma, npx prisma init, npm install @prisma/client, npx prisma generate

Import prisma client and try something.

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

const pc = new PrismaClient();
pc.user.findMany().then(console.log);

Expected behavior

Print users, error connecting to db, etc… usual Prisma behaviour.

Prisma information

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

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

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

model User {
  id    Int     @id @default(autoincrement())
  email String  @unique
  name  String?
}

Environment & setup

• OS: Mac OS
• Database: PostgreSQL
• Node.js version: v15.14.0
• Prisma version:

prisma               : 2.20.1
@prisma/client       : 2.20.1
Current platform     : darwin
Query Engine         : query-engine 60ba6551f29b17d7d6ce479e5733c70d9c00860e (at node_modules/.pnpm/@prisma+engines@2.20.0-26.60ba6551f29b17d7d6ce479e5733c70d9c00860e/node_modules/@prisma/engines/query-engine-darwin)
Migration Engine     : migration-engine-cli 60ba6551f29b17d7d6ce479e5733c70d9c00860e (at node_modules/.pnpm/@prisma+engines@2.20.0-26.60ba6551f29b17d7d6ce479e5733c70d9c00860e/node_modules/@prisma/engines/migration-engine-darwin)
Introspection Engine : introspection-core 60ba6551f29b17d7d6ce479e5733c70d9c00860e (at node_modules/.pnpm/@prisma+engines@2.20.0-26.60ba6551f29b17d7d6ce479e5733c70d9c00860e/node_modules/@prisma/engines/introspection-engine-darwin)
Format Binary        : prisma-fmt 60ba6551f29b17d7d6ce479e5733c70d9c00860e (at node_modules/.pnpm/@prisma+engines@2.20.0-26.60ba6551f29b17d7d6ce479e5733c70d9c00860e/node_modules/@prisma/engines/prisma-fmt-darwin)
Default Engines Hash : 60ba6551f29b17d7d6ce479e5733c70d9c00860e
Studio               : 0.365.0

[didier]

Hi, I know this issue is closed, but I may have found a solution that somehow fixes Prisma for me in SvelteKit. Initialising Prisma like this makes it work in both dev and prod for me. @tbillington would you mind trying this out, and letting me know if this works for you as well? I tested this on adapter-node.

// Prisma (workaround until Prisma fully supports ESM)
// This works in DEV
import * as Prisma from '@prisma/client'

// This works in PROD
import { default as ProdPrisma } from '@prisma/client'

let { PrismaClient } = Prisma
if (!dev) PrismaClient = ProdPrisma.PrismaClient

export const prisma = new PrismaClient()

[tbillington]

Thanks @madebysid that makes a lot of sense! I guess having SvelteKit do SSR gave me hope that it could run code relying on Node things, and maybe it can. I’ll have to dig into how exactly it runs the server side code, I assumed it was using Vite for that too but I am probably incorrect.

Feel free to close this 😃