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

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

@prisma/[email protected]

@prisma/[email protected]

@tanstack/[email protected]

@tanstack/[email protected]

@trpc/[email protected]

@trpc/[email protected]

@trpc/[email protected]

@trpc/[email protected]

@trpc/[email protected]

@trpc/[email protected]

[email protected]

[email protected]

[email protected]

[email protected]

I'm using

[email protected]

[email protected]

with

[email protected]

[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

$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

Prisma•2y ago•

5 replies

svirins

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

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

@prisma/[email protected]

@prisma/[email protected]

@tanstack/[email protected]

@tanstack/[email protected]

@trpc/[email protected]

@trpc/[email protected]

@trpc/[email protected]

@trpc/[email protected]

@trpc/[email protected]

@trpc/[email protected]

[email protected]

[email protected]

[email protected]

[email protected]

I'm using

[email protected]

[email protected]

with

[email protected]

[email protected]

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

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

Error: PrismaClient is unable to be run in the browser

Similar Threads

Similar Threads

Similar Threads