Sveltekit项目中Prisma枚举在浏览器端未定义的解决咨询

核心原因 #

Prisma生成的客户端默认适配Node.js环境，浏览器端代码无法直接访问服务端的Prisma枚举定义——因为Prisma客户端不会被打包进浏览器代码，且浏览器环境不支持其依赖的Node.js API。

具体解决方向 #

• 手动导出枚举到共享文件
  在项目中新建src/lib/enums.ts之类的共享文件，从Prisma生成的类型中导出需要在浏览器端使用的枚举，或者手动同步枚举的键值对：

  // src/lib/enums.ts
  import type { Prisma } from '@prisma/client';
  
  // 导出运行时可用的枚举对象
  export const OrderStatus = Prisma.OrderStatus;
  // 若仅需类型，可写成：export type OrderStatus = Prisma.OrderStatus;
  

  之后在+page.svelte中导入该文件的枚举：

  <script>
    import { OrderStatus } from '$lib/enums';
  </script>
  

  要是遇到运行时枚举无法访问的情况，可直接手动定义枚举对象：

  export const OrderStatus = {
    PENDING: 'PENDING',
    COMPLETED: 'COMPLETED',
    CANCELLED: 'CANCELLED'
  } as const;
  

• 服务端传递枚举值到客户端
  若不需要在浏览器端直接使用枚举类型，可在+page.server.ts的load函数中，把枚举对应的字符串值或键值映射作为数据返回给客户端：

  // +page.server.ts
  import { PrismaClient } from '@prisma/client';
  const prisma = new PrismaClient();
  
  export async function load() {
    const orders = await prisma.order.findMany();
    return {
      orders: orders.map(order => ({ ...order })),
      // 传递枚举的所有可选值供客户端判断
      orderStatusOptions: Object.values(Prisma.OrderStatus)
    };
  }
  

  然后在+page.svelte中直接使用传递过来的数据：

  <script>
    export let data;
  </script>
  
  {#each data.orders as order}
    {#if order.status === data.orderStatusOptions[0]}
      <!-- 展示对应状态的图标 -->
    {/if}
  {/each}
  

• 用Prisma生成器自动导出枚举
  配置Prisma生成器，让它自动把枚举导出到浏览器可访问的文件中。在prisma/schema.prisma里添加如下配置：

  generator client {
    provider = "prisma-client-js"
    output   = "../src/lib/prisma-client" // 将客户端生成到lib目录，方便浏览器端导入
  }
  
  generator enums {
    provider = "prisma-enum-generator"
    output = "../src/lib/generated-enums.ts" // 指定枚举生成路径
  }
  

  先安装依赖：npm install prisma-enum-generator --save-dev，再运行npx prisma generate生成枚举文件，之后就可以在浏览器端代码中导入使用。

额外注意事项 #

• 禁止在浏览器端直接导入@prisma/client，这会引发打包错误或运行时未定义问题。
• 使用TypeScript时，优先用import type导入枚举类型，避免打包不必要的代码。

内容的提问来源于stack exchange，提问作者Benny