Prisma•2y ago•

5 replies

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

$extends

$extends

$extends directive causes an application error ‘PrismaClient is unable to be run in the browser.’.
A meaningful part of the stack:

@prisma/client@5.18.0

@prisma/client@5.18.0

@prisma/client@5.18.0

@prisma/client@5.18.0

@tanstack/react-query@5.52.0

@tanstack/react-query@5.52.0

@tanstack/react-query@5.52.0

@tanstack/react-query@5.52.0

@trpc/client@11.0.0-rc.477

@trpc/client@11.0.0-rc.477

@trpc/client@11.0.0-rc.477

@trpc/client@11.0.0-rc.477

@trpc/react-query@11.0.0-rc.477

@trpc/react-query@11.0.0-rc.477

@trpc/react-query@11.0.0-rc.477

@trpc/react-query@11.0.0-rc.477

@trpc/server@11.0.0-rc.477

@trpc/server@11.0.0-rc.477

@trpc/server@11.0.0-rc.477

@trpc/server@11.0.0-rc.477

next@14.2.5

next@14.2.5

next@14.2.5

next@14.2.5

prisma-extension-pg-trgm@1.1.0

prisma-extension-pg-trgm@1.1.0

prisma-extension-pg-trgm@1.1.0

prisma-extension-pg-trgm@1.1.0

I'm using

pnpm@9.6.0

pnpm@9.6.0

pnpm@9.6.0

pnpm@9.6.0 with

node@20.15.0

node@20.15.0

node@20.15.0

node@20.15.0

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

$extends

$extends

$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';

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")
}
...

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

Error: PrismaClient is unable to be run in the browser

Similar Threads

Similar Threads

Similar Threads