Fails to resolve @prisma/client with Vite v6

[silvenon]

I'm using React Router as a...

framework

Reproduction

https://github.com/silvenon/repro/tree/react-router-v7-vite-v6-resolve-prisma-client

Clone the repository:

# if you have GitHub CLI installed run
gh repo clone silvenon/repro -- --branch react-router-v7-vite-v6-resolve-prisma-client
cd repro
# otherwise run
git clone https://github.com/silvenon/repro.git
cd repro
git switch react-router-v7-vite-v6-resolve-prisma-client

Install dependencies and set up Prisma:

npm run setup

The issue is present both in development and in build:

npm run dev

npm run build

System Info

System:
    OS: macOS 15.2
    CPU: (8) arm64 Apple M1 Pro
    Memory: 297.69 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.18.1 - ~/.n/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.8.2 - ~/.n/bin/npm
    pnpm: 9.15.1 - /opt/homebrew/bin/pnpm
    bun: 1.1.29 - ~/.bun/bin/bun
  Browsers:
    Chrome: 131.0.6778.205
    Edge: 131.0.2903.112
    Safari: 18.2
  npmPackages:
    @react-router/dev: ^7.1.0 => 7.1.0 
    @react-router/node: ^7.1.0 => 7.1.0 
    @react-router/serve: ^7.1.0 => 7.1.0 
    react-router: ^7.1.0 => 7.1.0 
    vite: ^6.0.5 => 6.0.5

Used Package Manager

npm

Expected Behavior

Expected to be able to upgrade to React Router v7.1.0 and to Vite v6, and have my app working as usual.

Actual Behavior

With Vite v6 it's failing to resolve @prisma/client both in dev and build.

Before v7.1.0 I had the same problem when I tried upgrading Vite to v6, so I was wondering what went wrong, but then I saw that you were still working on Vite v6 support so I assumed it was because of that, however unfortunately the problem remained.

I tried using Environment API to import @prisma/client in Vite v6 SSR without React Router involved, and it worked, so I think this has something to do with how React Router is using Vite.

[plugin:vite:import-analysis] Failed to resolve entry for package "@prisma/client". The package may have incorrect main/module/exports specified in its package.json: No known conditions for "." specifier in "@prisma/client" package

[timdorr]

This is a Prisma issue with packaging and Vite handles it, not an issue with React Router. You can work around this by importing the default explicitly or importing as a default-less module: prisma/prisma#6491 (comment)

[silvenon]

Are you sure that this is a current Prisma issue? I was barely able to find issues of people complaining about this on Prisma, the linked issue is 3 years old, and none of the solutions there are working for me.

Prisma packaging has changed a lot since that issue, it used to be CJS-only, now it's dual publish and supports all kinds of environments. And with the latest version publint doesn't report significant problems.

Also, as I described in my bug report, I'm not running into this issue in Vite v6 alone: https://github.com/silvenon/repro/tree/vite-v6-prisma-client, nor in Vite v5 + React Router. This is why I suspect that there is something that React Router does that doesn't work well with how Vite v6 resolves Prisma.

Note that In my example with only Vite v6 + Prisma I'm using Environment API, maybe this makes some kind of a difference in resolution 🤷‍♂️

[silvenon]

I mean, I can understand the strong suspicion towards Prisma packaging, I really wanted to find some kind of a problem there because if there was a problem with how React Router loads modules wouldn't other modules be failing to resolve as well? Why just Prisma, weird…

I guess I need to go dig deeper, I would just appreciate some pointers regarding which API for loading modules I need to look into for this. Just regular ssrLoadModule or something more complicated?

[luka-cfi]

This is a Prisma issue with packaging and Vite handles it, not an issue with React Router. You can work around this by importing the default explicitly or importing as a default-less module: prisma/prisma#6491 (comment)

none of this solution works for dev run

build:{
 rollupOptions: {
      external: ["@prisma/client"],
    },
    }

this works for prod build only

[luka-cfi]

solution if anyone looks for it is to add

output          = "../node_modules/randomdbname"

in schema.prisma then run npx prisma generate

and in vite config

ssr: {
    optimizeDeps: {
      include: ["randomdbname"],
    },
  },

replace randomdbname with whatever

[silvenon]

So by default this?

ssr: {
  optimizeDeps: {
    include: ["./node_modules/.prisma/client"],
  },
},

Unfortunately it didn't work for me either. In my repro could you tell me which steps exactly I need to do to get it working?

Just in case I also tried generating to a non-dot path using the recommended output, but still resolution gets stuck at @prisma/client.

[lukasa1993]

So by default this?

ssr: {
  optimizeDeps: {
    include: ["./node_modules/.prisma/client"],
  },
},

Unfortunately it didn't work for me either. In my repro could you tell me which steps exactly I need to do to get it working?

Just in case I also tried generating to a non-dot path using the recommended output, but still resolution gets stuck at @prisma/client.

that doesn't work since vite6 has some issue with path starting . so my solution bypasses that

oh and you need to replacte all imports in yuor code from @prisma/client to randomdbname

[silvenon]

Stripping away ./node_modules/ doesn't work for me either, so unless you can provide a working fork of my repro, let's not prolong this issue any longer than it needs to be.

Maybe for some reason it works for you, but I can't know the specifics of your setup without a working demo.

[lukasa1993]

Stripping away ./node_modules/ doesn't work for me either, so unless you can provide a working fork of my repro, let's not prolong this issue any longer than it needs to be.

Maybe for some reason it works for you, but I can't know the specifics of your setup without a working demo.

silvenon/repro#1

[silvenon]

But there's no bug for me with Vite v6 + Prisma alone, only when React Router is involved, so this is the repro that needs to be fixed: https://github.com/silvenon/repro/tree/react-router-v7-vite-v6-resolve-prisma-client

[silvenon]

My apologies, a similar fix would've worked for the React Router repro. I didn't think I also needed to update all of my imports, I thought that the @prisma/client imports could stay.

This workaround seems to solve the issue. I would've still liked to know what caused it so that I can properly report it to the appropriate project, but it's difficult to know where to look.

Thanks for your help!

[lukasa1993]

My apologies, the same fix would've worked for the React Router repro. I didn't think I also needed to update all of my imports, I thought that the @prisma/client imports can stay.

This workaround seems to solve the issue. I would've still liked to know what caused it so that I can properly report it to the appropriate project, but it's difficult to know where to look.

Thanks for your help!

something with vite aliases and '.' handling in path

[sapphi-red]

My guess is that this breaking change in Vite v6 is affecting your case.
https://vite.dev/guide/migration.html#default-value-for-resolve-conditions
It seems RR sets conditions: [] here

react-router/packages/react-router-dev/vite/plugin.ts

Line 807 in 6a5b4f2

conditions: viteCommand === "build" ? [] : ["development"],

react-router/packages/react-router-dev/vite/plugin.ts

Line 856 in 6a5b4f2

conditions: viteCommand === "build" ? [] : ["development"],

and that removes all default conditions.

Maybe a plugin like this can be used as a workaround.

import { defaultClientConditions, defaultServerConditions } from 'vite'

const p = {
  name: 'foo',
  enforce: 'post',
  config() {
    return {
      resolve: {
        conditions: [...defaultClientConditions],
      },
      ssr: {
        resolve: {
          conditions: [...defaultServerConditions]
        }
      }
    }
  }
}

[silvenon]

Wow, very nice catch, thank you so much! ❤️

Now @prisma/client is resolving, but SSRCompatModuleRunner fails to evaluate @prisma/client, I guess because it's CJS-only? (prisma/prisma#21858) However, certainly there are other dependencies that are CJS as well, so there's something else going on.

Now I know where to look 💪

@sapphi-red will you do the honors of submitting the fix for resolve.conditions to React Router?

8:44:38 AM [vite] (ssr) Error when evaluating SSR module virtual:react-router/server-build:
|- ReferenceError: module is not defined
    at eval (/Users/silvenon/Code/epi/node_modules/@prisma/client/default.js:3:14)
    at ESModulesEvaluator.runInlinedModule (file:///Users/silvenon/Code/epi/node_modules/vite/dist/node/module-runner.js:1061:6)
    at SSRCompatModuleRunner.directRequest (file:///Users/silvenon/Code/epi/node_modules/vite/dist/node/module-runner.js:1279:82)
    at SSRCompatModuleRunner.directRequest (file:///Users/silvenon/Code/epi/node_modules/vite/dist/node/chunks/dep-BZMjGe_U.js:30785:35)
    at SSRCompatModuleRunner.cachedRequest (file:///Users/silvenon/Code/epi/node_modules/vite/dist/node/module-runner.js:1173:28)
    at request (file:///Users/silvenon/Code/epi/node_modules/vite/dist/node/module-runner.js:1223:79)
    at eval (/Users/silvenon/Code/epi/app/db.server.ts:3:44)
    at ESModulesEvaluator.runInlinedModule (file:///Users/silvenon/Code/epi/node_modules/vite/dist/node/module-runner.js:1053:5)
    at SSRCompatModuleRunner.directRequest (file:///Users/silvenon/Code/epi/node_modules/vite/dist/node/module-runner.js:1279:61)
    at SSRCompatModuleRunner.directRequest (file:///Users/silvenon/Code/epi/node_modules/vite/dist/node/chunks/dep-BZMjGe_U.js:30785:23)

[silvenon]

@timdorr considering that my suspicions were true that the transition to Vite v6 is incomplete, could you reopen the bug report for now? At least until fix for resolve.conditions is merged outlined by this workaround #12610 (comment), the subsequent problem error above I can report separately.

[sapphi-red]

will you do the honors of submitting the fix for resolve.conditions to React Router?

It'll take some time to make a PR for me so feel free to create one instead of me🙂

[JasonColeyNZ]

I managed to get prisma working with Vite6 using...

import { remember } from "@epic-web/remember"
import { PrismaClient } from "@prisma/client/index.js"
export * from "@prisma/client/index.js"
export const prisma = remember("prisma", () => new PrismaClient())

This is my db.server.ts file and import everything from this file.

[IsaacCloos]

Perhaps in the near future Prisma will update to address this issue. In the meantime, I've found that changing my db.server.ts import of @prisma/client to @prisma/client/index.js seems to get it working again.

[silvenon]

Indeed, thanks for the workaround, @prisma/client/index.js is what @prisma/client import should resolve to. Maybe adding an alias in Vite configuration could work as well, that way we get to keep the imports:

resolve: {
  alias: {
    "@prisma/client": "@prisma/client/index.js"
  }
}

Perhaps fixing the root problem of resolving the module will also fix the failure to evaluate it. I'll get around to submitting a PR soon.

[silvenon]

Just like in the PR, the final missing ingredient was configuring ssr.resolve.externalConditions to defaultServerConditions as well, so adding that to sapphi's suggestion in #12610 (comment) completes the workaround, and then there is no need for importing @prisma/client/index or anything like that, just @prisma/client directly. At least that worked for me.