prisma client could not be resolved

[dhruvkaushik305]

Describe the bug

I started with a default vercel template for react router v7, deployed it on vercel, everything works. Now when i add prisma and start the build, vite says ".prisma/client/default" is imported by ".prisma/client/default?commonjs-external", but could not be resolved – treating it as an external dependency. and deployment crashes with an internal server error.
I had already raised this issue on react-router but they closed it saying that this isn't a react router bug

Reproduction

https://github.com/dhruvkaushik305/testing-prisma.git

Steps to reproduce

run npm run build and the cli shows that error message

System Info

System:
    OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz
    Memory: 14.32 GB / 19.20 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 22.12.0 - ~/.nvm/versions/node/v22.12.0/bin/node
    npm: 10.9.0 - ~/.nvm/versions/node/v22.12.0/bin/npm
    pnpm: 9.14.4 - ~/.nvm/versions/node/v22.12.0/bin/pnpm
    bun: 1.1.38 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 131.1.73.101

Used Package Manager

npm

Logs

These are the server logs on vercel

TypeError [ERR_INVALID_MODULE_SPECIFIER]: Invalid module ".prisma/client/default" is not a valid package name imported from /var/task/assets/server-build-Bi4c-HXU.js
    at parsePackageName (node:internal/modules/esm/resolve:786:11)
    at packageResolve (node:internal/modules/esm/resolve:809:5)
    at moduleResolve (node:internal/modules/esm/resolve:931:18)
    at moduleResolveWithNodePath (node:internal/modules/esm/resolve:1173:14)
    at defaultResolve (node:internal/modules/esm/resolve:1216:79)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:542:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:510:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:239:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:96:40)
    at link (node:internal/modules/esm/module_job:95:36)

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

More simple reproduction: https://stackblitz.com/edit/github-jxnpwg49?file=server%2Fapp.ts,vite.config.ts,package.json&terminal=build (needs to run locally as prisma does not work in stackblitz)

It seems prisma generates node_modules/.prisma/client and imports that from node_modules/@prisma/client/default.js by require('.prisma/client/default').
While require('.prisma/client/default') works, Vite does not support that because it's not supported for imports (i.e. import '.prisma/client/default' errors with ERR_INVALID_MODULE_SPECIFIER (spec). Technically, Vite should allow that to be resolved for require, but I think it's better to be avoided and the default generated location should be changed on prisma side.

For a workaround, you can change the location.
https://www.prisma.io/docs/orm/prisma-client/setup-and-configuration/generating-prisma-client#the-location-of-prisma-client
For example, update schema.prisma to include the following code:

generator client {
  provider = "prisma-client-js"
  output = "../node_modules/@prisma/client-generated"
}

and update the import to use @prisma/client-generated (instead of @prisma/client).

[hi-ogawa]

Not sure this is actionable for us either. Just to note, this repro is on Vite 5, but there is a prisma related issue with Vite 6 as well in remix-run/react-router#12610.
(Commented at the same time before seeing sapphi's reply 😄)

[dhruvkaushik305]

More simple reproduction: https://stackblitz.com/edit/github-jxnpwg49?file=server%2Fapp.ts,vite.config.ts,package.json&terminal=build (needs to run locally as prisma does not work in stackblitz)

It seems prisma generates node_modules/.prisma/client and imports that from node_modules/@prisma/client/default.js by require('.prisma/client/default'). While require('.prisma/client/default') works, Vite does not support that because it's not supported for imports (i.e. import '.prisma/client/default' errors with ERR_INVALID_MODULE_SPECIFIER (spec). Technically, Vite should allow that to be resolved for require, but I think it's better to be avoided and the default generated location should be changed on prisma side.

For a workaround, you can change the location. https://www.prisma.io/docs/orm/prisma-client/setup-and-configuration/generating-prisma-client#the-location-of-prisma-client For example, update schema.prisma to include the following code:

generator client {
  provider = "prisma-client-js"
  output = "../node_modules/@prisma/client-generated"
}

and update the import to use @prisma/client-generated (instead of @prisma/client).

I changed the output as

generator client {
  provider = "prisma-client-js"
  output   = "../node_modules/@prisma/client-generated"
}

and also changed the import as import { PrismaClient } from "@prisma/client-generated";

While building vite said this

node_modules/@prisma/client-generated/runtime/library.js (64:923): Use of eval in "node_modules/@prisma/client-generated/runtime/library.js" is strongly discouraged as it poses security risks and may cause issues with minification.

and the server logs on vercel have this error

ReferenceError: __dirname is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/var/task/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
at file:///var/task/assets/server-build-CVaE3q-I.js:23421:16
at ModuleJob.run (node:internal/modules/esm/module_job:234:25)
at async ModuleLoader.import (node:internal/modules/esm/loader:473:24)
at async requestHandler (file:///var/task/assets/app-QdoKnqb0.js:11639:44)
at async file:///var/task/assets/app-QdoKnqb0.js:12588:23

Is there something that i am missing?