Application breaks when adding .$extends to prisma initialziation

when I add the following line .$extends(unitNameFormattingExtension());
to the file where I initilize prisma, the app breaks with the error PrismaClient is unable to run in this browser environment


Here's the full code:
import { Prisma, PrismaClient, User } from '@prisma/client';
import { unitNameFormattingExtension } from 'prisma/extensions/unitNameTransformation';
import { ClientUser } from 'types/models/User';

// PrismaClient is attached to the `global` object in development to prevent
// exhausting your database connection limit.
//
// Learn more:
// https://pris.ly/d/help/next-js-best-practices

declare global {
  // eslint-disable-next-line no-var
  var prisma: PrismaClient | undefined;
}

const prismaOptions: Prisma.PrismaClientOptions = {};

// if (!!process.env.NEXT_PUBLIC_DEBUG)
//   prismaOptions.log = ['query', 'error', 'warn'];

export const prisma =
  globalThis.prisma ||
  new PrismaClient(prismaOptions).$extends(unitNameFormattingExtension());

if (process.env.NODE_ENV !== 'production') {
  globalThis.prisma = prisma;
}

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
export default prisma;



Could anyone help me with understanding what i'm doing wrong, or what am I not understanding?
As soon as I remove the $extend line it works perfectly fine.
Prisma is up to date with version 5.20
Screenshot_2024-09-24_at_1.20.00_PM.png
Was this page helpful?