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

Bug description

I have the following error message in my browser upon using sveltekit and the command “npm run preview”:

Uncaught TypeError: Error resolving module specifier “.prisma/client/index-browser”. Relative module specifiers must start with “./”, “../” or “/”.

It references a piece of code that was compiled with “npm run build” in localhost:3000/_app/start-b07b1607.js:

...s-d1fb5791.js";import".prisma/client/index-browser";let Be="",et="";function ...

How to reproduce

I have tried reproducing this error with using older versions of Prisma, the adaptor and Svelte, switching from pnpm to npm, but nothing helps. I have a MWE repository that comes close to reproducing the error but doesn’t actually reproduce it at https://github.com/wvhulle/prisma-sveltekit-bug-report.

Expected behavior

How come the Svelte compiler emits “.prisma/client/index-browser” as a module specifier? Is this an error in Prisma, Vite or something else? The dev mode works without problem.

The question seems to be related, but is about Vue, not about Svelte.

Prisma information

I cannot share the schema, but this is the query that happens on the page where the error happens.

import prisma from '$lib/db';

export async function get() {
    const projects = await prisma.project.findMany({})
    return { body: projects }
}

And i am using this solution for the production build of Sveltekit:

import pkg, { PrismaClient } from '@prisma/client';
import { dev } from '$app/env';

declare global {
    var _prisma: PrismaClient; // eslint-disable-line
}

let prisma;
if (dev) {
    if (!global._prisma) {
        global._prisma = new PrismaClient();
    }
    prisma = global._prisma;
} else {
    const { PrismaClient: PrismaClientProd } = pkg;
    prisma = new PrismaClientProd();
}

export default prisma as PrismaClient; // type assertion for shim

### Environment & setup

- OS: Linux Mint 20.3
- Database: PostgreSQL
- Node.js version: v17.8.0


### Prisma Version

prisma : 3.11.0 @prisma/client : 3.11.0 Current platform : debian-openssl-1.1.x Query Engine (Node-API) : libquery-engine b371888aaf8f51357c7457d836b86d12da91658b (at …/…/…/…/.pnpm-store/v3/tmp/_npx/69216/5/node_modules/.pnpm/@prisma+engines@3.11.0-48.b371888aaf8f51357c7457d836b86d12da91658b/node_modules/@prisma/engines/libquery_engine-debian-openssl-1.1.x.so.node) Migration Engine : migration-engine-cli b371888aaf8f51357c7457d836b86d12da91658b (at …/…/…/…/.pnpm-store/v3/tmp/_npx/69216/5/node_modules/.pnpm/@prisma+engines@3.11.0-48.b371888aaf8f51357c7457d836b86d12da91658b/node_modules/@prisma/engines/migration-engine-debian-openssl-1.1.x) Introspection Engine : introspection-core b371888aaf8f51357c7457d836b86d12da91658b (at …/…/…/…/.pnpm-store/v3/tmp/_npx/69216/5/node_modules/.pnpm/@prisma+engines@3.11.0-48.b371888aaf8f51357c7457d836b86d12da91658b/node_modules/@prisma/engines/introspection-engine-debian-openssl-1.1.x) Format Binary : prisma-fmt b371888aaf8f51357c7457d836b86d12da91658b (at …/…/…/…/.pnpm-store/v3/tmp/_npx/69216/5/node_modules/.pnpm/@prisma+engines@3.11.0-48.b371888aaf8f51357c7457d836b86d12da91658b/node_modules/@prisma/engines/prisma-fmt-debian-openssl-1.1.x) Default Engines Hash : b371888aaf8f51357c7457d836b86d12da91658b Studio : 0.458.0 Preview Features : fullTextSearch

[sharmapukar217]

i got a solution and is working totally fine atleast for me. just add this to vite.config.ts

resolve: {
    alias: {
      ".prisma/client/index-browser": "./node_modules/.prisma/client/index-browser.js"
    }
  }

Note: This is not working with pnpm

[cawa-93]

Workaround

I have a problem when you are trying to import a @prisma/client into a client-bundle. Despite the error, it makes little sense, because the prisma still can not work in the browser.

There is only one exception: Types. The prisma is difficult to tree-shaking, and if you import only one enum, it will try to include the whole @prisma/client in your bundle and runtime errors.

import { UserRoleEnum } from '@prisma/client'
// imported @prisma/client -> '.prisma/client' -> '@prisma/client/runtime/index'

The workaround is quite simple.

1. If you only need a type, then import enum as a type. This ensures that prism imports will only exist at compile time and will not be bundled.

// app.ts
import type { UserRoleEnum } from '@prisma/client'
type Props = { role: UserRoleEnum  }

1. If you want to use enum in runtime, here’s a trick. In a separate file, you need to re-export the TYPE from the prism, but add an enum implementation for runtime.

// my-enums/user-role.ts

// Import original enum as type
import type { UserRoleEnum as UserRoleEnumOrigin } from '@prisma/client'

// Guarantee that the implementation corresponds to the original type
export const UserRoleEnum: { [k in UserRoleEnumOrigin ]: k } = {
  Role1: 'Role1',
  Role2: 'Role2',
} as const

// Re-exporting the original type with the original name
export type UserRoleEnum = UserRoleEnumOrigin

// app.ts
import { UserRoleEnum } from 'my-enums/user-role.ts'

console.log(UserRoleEnum.Role1)
console.log(UserRoleEnum.Role3) // Property 'Role3' does not exist on type '{ Role1: "Role1"; Role2: "Role2"; }'. 

This could have been avoided if the prisma had written all the enums in separate files. Then we could import a specific enum directly from the prisma without any problems

import { UserRoleEnum } from '@prisma/client/enums/UserRoleEnum'

Upd

For TypeScript 4.9 you may use satisfies and re-export prisma’s enums

// my-enums/user-role.ts

// Import original type
import type { UserRoleEnum as UserRoleEnumOrigin } from '@prisma/client'

// Re-export enum for runtime
export const UserRoleEnum = {
  Role1: 'Role1',
  Role2: 'Role2',
} satisfies UserRoleEnumOrigin