Prisma•4mo ago

Error: PrismaClient is unable to be run in the browser

Hi all. I have encountered the following problems: When extending the Prisma client, adding the $extends directive causes an application error ‘PrismaClient is unable to be run in the browser.’. A meaningful part of the stack: @prisma/[email protected] @tanstack/[email protected] @trpc/[email protected] @trpc/[email protected] @trpc/[email protected] [email protected] [email protected] I'm using [email protected] with [email protected] At first, I thought the problem was related to the way tRPC interacts with Prisma and react-query in queries from the client. But, it turns out that just adding another Prisma client with the directive $extends is enough to cause the error. Even if it's not being used anywhere in the app code.

import { PrismaClient } from '@prisma/client';
import { withPgTrgm } from 'prisma-extension-pg-trgm';
const prismaClientSingleton = () =>
  new PrismaClient({
  log: ['error'],
});
const prismaClientSingletonForPgTrgm = () =>
  new PrismaClient({
    log: ['error'],
}).$extends(withPgTrgm());
const dbWithPgTrgm = prismaClientSingletonForPgTrgm();
const globalForPrisma = globalThis as unknown as {
    prisma: ReturnType<typeof prismaClientSingleton> | undefined;
};
export const db = globalForPrisma.prisma ?? prismaClientSingleton();
if (process.env['NODE_ENV'] !== 'production') globalForPrisma.prisma = db;
export * from '@prisma/client';

import { PrismaClient } from '@prisma/client';
import { withPgTrgm } from 'prisma-extension-pg-trgm';
const prismaClientSingleton = () =>
  new PrismaClient({
  log: ['error'],
});
const prismaClientSingletonForPgTrgm = () =>
  new PrismaClient({
    log: ['error'],
}).$extends(withPgTrgm());
const dbWithPgTrgm = prismaClientSingletonForPgTrgm();
const globalForPrisma = globalThis as unknown as {
    prisma: ReturnType<typeof prismaClientSingleton> | undefined;
};
export const db = globalForPrisma.prisma ?? prismaClientSingleton();
if (process.env['NODE_ENV'] !== 'production') globalForPrisma.prisma = db;
export * from '@prisma/client';

The application builds successfully, but when I run it in the browser console I see: Error: PrismaClient is unable to run in this browser environment, or has been bundled for the browser (running in unknown).

generator client {
    provider = "prisma-client-js"
    previewFeatures = ["fullTextSearch", "postgresqlExtensions", "tracing"]
    binaryTargets = ["native", "linux-musl"]
}
datasource db {
    provider = "postgresql"
    url = env("DATABASE_URL")
}
...

generator client {
    provider = "prisma-client-js"
    previewFeatures = ["fullTextSearch", "postgresqlExtensions", "tracing"]
    binaryTargets = ["native", "linux-musl"]
}
datasource db {
    provider = "postgresql"
    url = env("DATABASE_URL")
}
...

I would be very grateful if you could share your insights and ways to solve this problem

2 Replies

Nurul•4mo ago

Does the error go away if you don't extend the PrismaClient with $extends? I want to know if this happens only when you are using withPgTrgm extension.

svirinsOP•4mo ago

Yes, If I remove $extends, the PrismaClient works fine @Nurul (Prisma) The problem also occurs when I add other extensions to PrismaClient, such as Accelerate. The issue has been pinpointed as a combination involving the tRPC auth function from Clerk (middleware running on Edge) and PrismaClient.

Gaming

Programming

Error: PrismaClient is unable to be run in the browser