Wednesday, April 30, 2025

React Router v7 + Typescript + Shadcn + Prisma

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

  • prisma/schema.prisma defines the outputs of npx prisma generate
generator client {
  provider = "prisma-client"
  output   = "../generated/prisma"
}
  • PrismaClient needs to import from these outputs. For instance, prisma/seed.ts
import { PrismaClient } from '@prisma/client';

changed to

import { PrismaClient } from 'generated/prisma';


Error: exports is not defined

  • This is a bug of Shadcn. Go to components/shadcn/ui/sidebar.tsx etc.

import { VariantProps, cva } from 'class-variance-authority';

changed to
import { type VariantProps, cva } from 'class-variance-authority';


Error: module is not defined

  • Generators of prisma schema causes this error. At prisma/prisma.schema
generator client { provider = "prisma-client-js" output = "../generated/prisma" }

should change into
generator client { provider = "prisma-client" output = "../generated/prisma" }

  • provider = prisma-client-js

  • The prisma-client-js is the default generator for Prisma ORM 6.X versions and before. It requires the @prisma/client npm package and generates Prisma Client into node_modules.

  • provider = prisma-client 

    The new prisma-client generator offers greater control and flexibility when using Prisma ORM across different JavaScript environments (such as ESM, Bun, Deno, ...). It generates Prisma Client into a custom directory in your application's codebase that's specified via the output field on the generator block. This gives you full visibility and control over the generated code. It also splits the generated Prisma Client library into multiple files.


Error: Environment variable not found: DATABASE_URL

This error happens when executing
npx tsx prisma/seed.ts

DATABASE_URL environment variable is not set from .env file. It worked when it sets with this command.
export $(grep -v '^#' .env | xargs)