typescript next.js prisma vercel supabase

Getting Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again

This is the error it's giving when I run npm run build:

ml@M-----MacBook-Air skyfold.dev % npm run build

> skyfold.dev@0.1.0 build
> next build

   ▲ Next.js 15.4.6
   - Environments: .env

   Creating an optimized production build ...
 ✓ Compiled successfully in 0ms
   Skipping linting
 ✓ Checking validity of types    
   Collecting page data  ...[Error: Failed to collect configuration for /] {
  [cause]: Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again.
      at 4867 (.next/server/app/page.js:2:16313)
      at Function.c (.next/server/webpack-runtime.js:1:127)
}

> Build error occurred
[Error: Failed to collect page data for /] { type: 'Error' }
ml@M-----MacBook-Air skyfold.dev %

I have tried following the suggested solution of the error, however running generate command did not solve the issue and yielded the same result. I'm very new to website development, so I do not quite understand the error as much.

Note linting is temporarily disabled as it was causing errors previously. Using Supabase as my db.

I think the main issue is caused by the way I'm importing/initializing prisma client. This is how I'm doing it now:

src/lib/prisma.ts

import { PrismaClient } from "@prisma/client";

let prisma: PrismaClient;

declare global {
  var prisma: PrismaClient | undefined;
}

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

export default prisma;

src/app/page.tsx

// app/page.tsx

// Imports
import Head from "next/head";
import Link from "next/link";
import prisma from "../lib/prisma";

// Home Page Component
export default async function HomePage() {
  const data = await prisma.user_infos.findMany();
  return (
    <>
      <Head>
        <title>Skyfold</title>
        <meta
          name="description"
          content="Skyfold is a game developed by DwangML."
        />
      </Head>

      <main className="p-8">
        <h1 className="text-3xl font-bold mb-4">Welcome to Skyfold</h1>

        <ul>
          notes
        </ul>

        <Link href="/account">
          <button className="mt-4 px-4 py-2 bg-blue-600 text-white rounded">
            Go to Account
          </button>
        </Link>
      </main>
    </>
  );
}

I would like to fix the error so I can request data in page.tsx.

Solution

The issue is that you specified an output where Prisma should generate types in your schema.prisma, while still importing it from its default location. It technically can be custom, but you then need to customize the import of the PrismaClient too.

However, I would advise you to

remove that line entirely

// schema.prisma
generator client {
  provider = "prisma-client-js"
  output   = "../src/generated/prisma" // <-- THIS LINE
}

run npx prisma generate to regenerate types to the default directory (at node_modules)
try to build your app

Optionally, you can remove the src/generated folder with your old types, as this will now be useless.

Hope it helps!