prisma / prisma

Next-generation ORM for Node.js & TypeScript | PostgreSQL, MySQL, MariaDB, SQL Server, SQLite, MongoDB and CockroachDB
https://www.prisma.io
Apache License 2.0
37.68k stars 1.46k forks source link

Cannot import enum in the browser (Svelte Kit project) #22667

Open Ennoriel opened 4 months ago

Ennoriel commented 4 months ago

Bug description

When importing an enum in the browser, it works in dev but fails with a production build with the following error in the browser console:

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

This issue is related to https://github.com/prisma/prisma/issues/16239 with a repro.

How to reproduce

git clone git@github.com:Ennoriel/bug-prisma-enum-browser.git cd bug-prisma-enum-browser npm i npx prisma generate npm run build npm run preview

Expected behavior

It should be possible to import and use the enums everywhere.

Prisma information

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id     String     @id @unique @default(dbgenerated("gen_random_uuid()")) @db.Uuid
  status UserStatus
}

enum UserStatus {
  activated
  not_activated
}
<script lang="ts">
  import { UserStatus } from '@prisma/client';
</script>

{UserStatus.archived}

Environment & setup

Prisma Version

prisma                  : 5.8.1
@prisma/client          : 5.8.1
Computed binaryTarget   : windows
Operating System        : win32
Architecture            : x64
Node.js                 : v20.10.0
Query Engine (Node-API) : libquery-engine 78caf6feeaed953168c64e15a249c3e9a033ebe2 (at node_modules\@prisma\engines\query_engine-windows.dll.node)
Schema Engine           : schema-engine-cli 78caf6feeaed953168c64e15a249c3e9a033ebe2 (at node_modules\@prisma\engines\schema-engine-windows.exe)
Schema Wasm             : @prisma/prisma-schema-wasm 5.8.1-1.78caf6feeaed953168c64e15a249c3e9a033ebe2
Default Engines Hash    : 78caf6feeaed953168c64e15a249c3e9a033ebe2
Studio                  : 0.497.0
Eric-Arz commented 4 months ago

SvelteKIT uses Vite which as far as i know doesn't support enums in client side code.

You have to use import type { UserStatus } from '@prisma/client';

Ennoriel commented 4 months ago

@Eric-Arz can you link a vite issue or documentation section that supports this?

I am not trying to import the enum type but the enum itself.

Based on the error, I looked at .prisma/client/index-browser and found it in the (probably bundled file) @prisma/client/index-browser.js and replaced:

const prisma = require('.prisma/client/index-browser')

with

// relative path based on a pnpm install
const prisma = require('../../.prisma/client/index-browser')

rebuilt my project and it worked.

Eric-Arz commented 4 months ago

can you link a vite issue or documentation section that supports this?

https://github.com/sveltejs/kit/issues/4444

Ennoriel commented 4 months ago

Thanks for the linked issue!

The thing is that it's not really an enum, right?

Here is the generate .prisma/client/index.js file generated with the schema of my issue:

exports.$Enums = {}
exports.Status = exports.$Enums.Status = {
  fail: 'fail',
  success: 'success'
};
woss commented 2 months ago

https://github.com/prisma/prisma/discussions/20575