Module Resolution Fails When Prisma Enums Are Included in Client-Side Builds

When referencing a Prisma enum in code that runs on the client side, module resolution fails if it is included in the client build.

This seems to occur in Vite production builds. (I confirmed the issue in Remix, but the same problem has been reported in Nuxt.js as well.)
It does not occur with the Vite development server.

This is an issue reported in the following GitHub Issue and has not yet been fixed. (However, there is a solution involving configuration.)

• `Uncaught TypeError: Error resolving module specifier “.prisma/client/index-browser”. Relative module specifiers must start with “./”, “../” or “/”.` · Issue #12504 · prisma/prisma

Error details

During the build, the following warning is displayed (the build itself completes):

> build
> remix vite:build

vite v5.3.3 building for production...
".prisma/client/index-browser" is imported by ".prisma/client/index-browser?commonjs-external", but could not be resolved – treating it as an external dependency.

If you start the server and access it in a browser in this state, the following error occurs in the browser:

Uncaught TypeError: Failed to resolve module specifier ".prisma/client/index-browser". Relative references must start with either "/", "./", or "../".

Solution

When using npm or yarn

This can be avoided by specifying an alias in the Vite build configuration.
You specify resolve > alias in vite.config.ts as follows:

• https://github.com/prisma/prisma/issues/12504#issuecomment-1285883083

export default defineConfig({
  resolve: {
    alias: {
      ".prisma/client/index-browser": "./node_modules/.prisma/client/index-browser.js"
    }
  }
});

This method was also documented in the Prisma troubleshooting guide for Nuxt.js.

• https://www.prisma.io/docs/orm/more/help-and-troubleshooting/help-articles/prisma-nuxt-module#resolving-typeerror-failed-to-resolve-module-specifier-prismaclientindex-browser

When using pnpm

With pnpm, the way modules are managed is different, so the method mentioned above will not work.
(I actually got stuck on this myself...)

Since the Prisma version number and other details will be included in the alias destination path, you need to determine it based on the resolution path of the @prisma/client module.

• https://github.com/prisma/prisma/issues/12504#issuecomment-1599452566

import { createRequire } from 'module'
import path from 'path'
import { defineConfig } from 'vite'

const { resolve } = createRequire(import.meta.url)

const prismaClient = `prisma${path.sep}client`

const prismaClientIndexBrowser = resolve('@prisma/client/index-browser').replace(`@${prismaClient}`, `.${prismaClient}`)

export default defineConfig(() => ({
   resolve: { alias: { '.prisma/client/index-browser': path.relative(__dirname, prismaClientIndexBrowser) } },
}))

This method can also be used with npm or yarn, so it might be better to use this approach consistently to avoid mistakes.