app router - prisma client

[brazen spruce]

I have lib/database.ts

import { PrismaClient } from '@prisma/client'

export default new PrismaClient()

and auth.ts which uses it

but I get an error

Unhandled Runtime Error
Error: PrismaClient is unable to be run in the browser.
In case this error is unexpected for you, please report it in https://github.com/prisma/prisma/issues

Source
lib/database.ts (3:15) @ eval

1 | import { PrismaClient } from '@prisma/client'
2 |

3 | export default new PrismaClient()

[thorn zephyr]

Hi @brazen spruce. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

The error you're encountering is due to trying to run PrismaClient in the browser. PrismaClient is designed to run in a Node.js environment and not in the browser.

In the Vercel Guide (https://vercel.com/guides/nextjs-prisma-postgres), it's recommended to create a single PrismaClient instance that you can import into any file where it's needed. The instance should be created in a prisma.ts file inside the lib/ directory.

Here's how you should structure your PrismaClient instance:

// lib/prisma.ts
import { PrismaClient } from '@prisma/client';

let prisma: PrismaClient;

if (process.env.NODE_ENV === 'production') {
 prisma = new PrismaClient();
} else {
 if (!global.prisma) {
  global.prisma = new PrismaClient();
 }
 prisma = global.prisma;
}

export default prisma;

This code checks if the environment is production or not. If it's production, it creates a new PrismaClient instance. If it's not production (i.e., development), it checks if a PrismaClient instance already exists in the global object. If it does, it uses that. If it doesn't, it creates a new one. This prevents multiple instances of PrismaClient from being created during development, which can lead to too many connections being created with your database.

You can then import this prisma instance into your auth.ts file or any other file where you need to interact with your database.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@brazen spruce kapa.ai is still learning and improving, please let us how it did by reacting below

[brazen spruce]

@thorn zephyr error on let prisma

Exporting mutable 'let' binding, use 'const' instead.eslintimport/no-mutable-exports
(alias) class PrismaClient<T extends Prisma.PrismaClientOptions = Prisma.PrismaClientOptions, U = "log" extends keyof T ? T["log"] extends (Prisma.LogLevel | Prisma.LogDefinition)[] ? Prisma.GetEvents<...> : never : never, GlobalReject extends Prisma.RejectOnNotFound | ... 1 more ... | undefined = "rejectOnNotFound" extends keyof T ? T["rejectOnNotFound"] : false, ExtArgs extends runtime.Args = runtime.DefaultArgs>
import PrismaClient
Prisma Client ʲˢ
Type-safe database client for TypeScript & Node.js

@example

const prisma = new PrismaClient()
// Fetch zero or more Users
const users = await prisma.user.findMany()
Read more in our docs.

error prisma on globa.prisma

lement implicitly has an 'any' type because type 'typeof globalThis' has no index signature.ts(7017)
⚠ Error (TS7017) |
Element implicitly has an
type because type
has no index signature.

[thorn zephyr]

Let me check the knowledge base for you. One moment! :books:

---

The first error you're encountering is due to ESLint's import/no-mutable-exports rule, which discourages exporting mutable variables. However, in this case, you need to mutate prisma to conditionally assign it a PrismaClient instance. You can disable this ESLint rule for the prisma variable by adding a comment above its declaration:

// eslint-disable-next-line import/no-mutable-exports
let prisma: PrismaClient;

The second error is a TypeScript error that occurs because TypeScript doesn't know the type of global.prisma. You can extend the global object's type to include prisma by adding a type declaration:

declare global {
  var prisma: PrismaClient | undefined;
}

Here's how your updated prisma.ts file should look:

// lib/prisma.ts
import { PrismaClient } from '@prisma/client';

declare global {
  var prisma: PrismaClient | undefined;
}

// eslint-disable-next-line import/no-mutable-exports
let prisma: PrismaClient;

if (process.env.NODE_ENV === 'production') {
  prisma = new PrismaClient();
} else {
  if (!global.prisma) {
    global.prisma = new PrismaClient();
  }
  prisma = global.prisma;
}

export default prisma;

This code should resolve the ESLint and TypeScript errors you're encountering.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@brazen spruce kapa.ai is still learning and improving, please let us how it did by reacting below

[brazen spruce]

@thorn zephyr

error on var prisma: PrismaClient | undefined

All 'var' declarations must be at the top of the function scope.eslintvars-on-top
Unexpected var, use let or const instead.eslintno-var
var prisma: PrismaClient<Prisma.PrismaClientOptions, never, Prisma.RejectOnNotFound | Prisma.RejectPerOperation | undefined, DefaultArgs> | undefined

[thorn zephyr]

Let me check the knowledge base for you. One moment! :books:

---

The errors you're encountering are due to ESLint rules that discourage the use of var and recommend that all variable declarations be at the top of the function scope.

In this case, you can use namespace instead of var to extend the global object's type. Here's how you can do it:

// lib/prisma.ts
import { PrismaClient } from '@prisma/client';

declare global {
  namespace NodeJS {
    interface Global {
      prisma: PrismaClient | undefined;
    }
  }
}

// eslint-disable-next-line import/no-mutable-exports
let prisma: PrismaClient;

if (process.env.NODE_ENV === 'production') {
  prisma = new PrismaClient();
} else {
  if (!global.prisma) {
    global.prisma = new PrismaClient();
  }
  prisma = global.prisma;
}

export default prisma;

This code should resolve the ESLint errors you're encountering.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@brazen spruce kapa.ai is still learning and improving, please let us how it did by reacting below

[brazen spruce]

@thorn zephyr

error on namespace NodeJS {
interface Global {
prisma: PrismaClient | undefined;
}
}

ES2015 module syntax is preferred over namespaces.eslint@typescript-eslint/no-namespace

and error prisma on globa.prisma

Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature.ts(7017)
⚠ Error (TS7017) |
Element implicitly has an
type because type
has no index signature.
any

[thorn zephyr]

Let me check the knowledge base for you. One moment! :books:

---

The first error is due to an ESLint rule that prefers ES2015 module syntax over namespaces. You can disable this rule for the NodeJS namespace by adding a comment above its declaration:

// eslint-disable-next-line @typescript-eslint/no-namespace

The second error is a TypeScript error that occurs because TypeScript doesn't know the type of global.prisma. You can fix this by explicitly telling TypeScript that global.prisma can be of type PrismaClient or undefined.

Here's how your updated prisma.ts file should look:

// lib/prisma.ts
import { PrismaClient } from '@prisma/client';

// eslint-disable-next-line @typescript-eslint/no-namespace
declare global {
  namespace NodeJS {
    interface Global {
      prisma: PrismaClient | undefined;
    }
  }
}

// eslint-disable-next-line import/no-mutable-exports
let prisma: PrismaClient;

if (process.env.NODE_ENV === 'production') {
  prisma = new PrismaClient();
} else {
  // @ts-ignore
  if (!global.prisma) {
    // @ts-ignore
    global.prisma = new PrismaClient();
  }
  // @ts-ignore
  prisma = global.prisma;
}

export default prisma;

The // @ts-ignore comments are used to tell TypeScript to ignore the next line. This should resolve the TypeScript error you're encountering. However, please note that using // @ts-ignore should be avoided if possible, as it can hide real TypeScript errors. In this case, it's used as a workaround to extend the global object's type.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: