Prisma•4w ago

Vite + D1 + Cloudflare Workers + Prisma

I've used Prisma + D1 + Cloudflare workers before and it's been a great experience. I'm not trying to use the same tack with Vite + Honox (https://github.com/honojs/honox/tree/main) in the mix. My vite config uses two plugins:

import build from "@hono/vite-build/cloudflare-workers";
import honox from "honox/vite";

import build from "@hono/vite-build/cloudflare-workers";
import honox from "honox/vite";

Using prisma modules causes errors: e.g.

import { PrismaD1 } from "@prisma/adapter-d1";
const adapter = new PrismaD1(c.env.DB);

import { PrismaD1 } from "@prisma/adapter-d1";
const adapter = new PrismaD1(c.env.DB);

causes this error

module is not defined
    at eval (/home/ubuntu/projects/admin/node_modules/@prisma/debug/dist/index.js:30:1)
    at instantiateModule (file:///home/ubuntu/projects/admin/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:52974:11

module is not defined
    at eval (/home/ubuntu/projects/admin/node_modules/@prisma/debug/dist/index.js:30:1)
    at instantiateModule (file:///home/ubuntu/projects/admin/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:52974:11

Are there any tricks to a vite config that will work with Prisma client libraries, but also allow the cloudflare worker build plugin to work (to rollup into a single output file with no external dependencies)

GitHub

GitHub - honojs/honox: HonoX - Hono based meta framework

HonoX - Hono based meta framework. Contribute to honojs/honox development by creating an account on GitHub.

2 Replies

Prisma AI Help•4w ago

You chose to compile with the bot. One moment while I piece together your answer… Based on the knowledge sources provided, I don't have enough specific information to fully answer your question about using Prisma with Vite, D1, Cloudflare Workers, and Honox. However, I can provide some relevant insights and suggestions based on similar issues reported with Prisma and Vite: 1. Vite and Prisma compatibility issues have been reported before. The error you're encountering seems to be related to how Vite handles module resolution for Prisma. 2. One potential solution that has worked for some users is to modify the Vite configuration to properly resolve Prisma modules. Here's an example of a Vite config that might help:

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

const require = createRequire(import.meta.url);

const prismaClient = require
  .resolve('@prisma/client')
  .replace(/@prisma(\/|\\)client(\/|\\)index\.js/, '.prisma/client/index-browser.js');

const prismaIndexBrowser = path.normalize(path.relative(process.cwd(), prismaClient));

export default defineConfig(() => ({
  resolve: { alias: { '.prisma/client/index-browser': prismaIndexBrowser } },
}));

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

const require = createRequire(import.meta.url);

const prismaClient = require
  .resolve('@prisma/client')
  .replace(/@prisma(\/|\\)client(\/|\\)index\.js/, '.prisma/client/index-browser.js');

const prismaIndexBrowser = path.normalize(path.relative(process.cwd(), prismaClient));

export default defineConfig(() => ({
  resolve: { alias: { '.prisma/client/index-browser': prismaIndexBrowser } },
}));

This configuration attempts to resolve the Prisma client modules correctly for Vite Github Issue #12504. 3. For Cloudflare Workers specifically, make sure you're using the edge-compatible version of Prisma Client. You should import from @prisma/client/edge instead of @prisma/client Github Issue #23882. 4. Ensure that you've generated Prisma Client with the --no-engine flag for edge compatibility:

npx prisma generate --no-engine

npx prisma generate --no-engine

5. In your schema.prisma file, make sure you've enabled the driverAdapters preview feature:

generator client {
  provider        = "prisma-client-js"
  previewFeatures = ["driverAdapters"]
}

generator client {
  provider        = "prisma-client-js"
  previewFeatures = ["driverAdapters"]
}

6. For D1 specifically, you might need to adjust your Prisma schema and client initialization. Here's an example:

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

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

And in your code:

import { PrismaClient } from '@prisma/client/edge';
import { PrismaD1 } from '@prisma/adapter-d1';

const prisma = new PrismaClient({
  adapter: new PrismaD1(c.env.DB),
});

import { PrismaClient } from '@prisma/client/edge';
import { PrismaD1 } from '@prisma/adapter-d1';

const prisma = new PrismaClient({
  adapter: new PrismaD1(c.env.DB),
});

However, please note that these suggestions are based on similar issues and may not directly solve your specific problem with Honox and the Cloudflare Workers build plugin. You might need to experiment with different configurations or reach out to the Honox and Cloudflare Workers communities for more specific guidance on making these tools work together with Prisma. Short answer: The knowledge sources don't provide a direct solution for your specific setup, but adjusting the Vite configuration, using the edge-compatible Prisma Client, and ensuring proper Prisma setup for Cloudflare Workers might help resolve the issues you're facing. 🤔 Alright, thanks for letting us know that there's still some help needed. A team member will reply to you shortly. In the meantime, please let us know any additional info, questions, or which parts of the answer may need clarification.

dan—1106OP•4w ago

some additional context on my setup/error When I try to use Prisma client libraries, I get errors in my dev server:

module is not defined
    at eval (/home/ubuntu/projects/admin/node_modules/@prisma/debug/dist/index.js:30:1)
    at instantiateModule (file:///home/ubuntu/projects/admin/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:52974:11

module is not defined
    at eval (/home/ubuntu/projects/admin/node_modules/@prisma/debug/dist/index.js:30:1)
    at instantiateModule (file:///home/ubuntu/projects/admin/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:52974:11

When I try to deploy, I get errors:

  Uncaught Error: No such module ".prisma/client/index-browser".
    imported from "index.js"
   [code: 10021]

  Uncaught Error: No such module ".prisma/client/index-browser".
    imported from "index.js"
   [code: 10021]

This is my vite.config.ts file:

import build from "@hono/vite-build/cloudflare-workers";
import honox from "honox/vite";
import adapter from "@hono/vite-dev-server/cloudflare";
import { defineConfig } from "vite";
import { getPlatformProxy } from "wrangler";

export default defineConfig(async ({ command }) => {
  const platformProxy =
    command === "serve"
      ? await getPlatformProxy({
          environment: "prod",
          configPath: "wrangler.json",
        })
      : null;

  const devServerConfig = platformProxy
    ? {
        adapter: {
          env: platformProxy.env,
          onServerClose: platformProxy.dispose,
        },
      }
    : { adapter };

  return {
    plugins: [
      honox({
        devServer: devServerConfig,
      }),
      build(),
    ],
  };
});

import build from "@hono/vite-build/cloudflare-workers";
import honox from "honox/vite";
import adapter from "@hono/vite-dev-server/cloudflare";
import { defineConfig } from "vite";
import { getPlatformProxy } from "wrangler";

export default defineConfig(async ({ command }) => {
  const platformProxy =
    command === "serve"
      ? await getPlatformProxy({
          environment: "prod",
          configPath: "wrangler.json",
        })
      : null;

  const devServerConfig = platformProxy
    ? {
        adapter: {
          env: platformProxy.env,
          onServerClose: platformProxy.dispose,
        },
      }
    : { adapter };

  return {
    plugins: [
      honox({
        devServer: devServerConfig,
      }),
      build(),
    ],
  };
});

These are my npm scripts:

  "scripts": {
    "dev": "vite",
    "build": "vite build --mode client && vite build",
    "preview": "npm run build && wrangler dev",
    "deploy": "npm run build && wrangler deploy --env prod",
    "db:migrate": "npx tsx prisma/migrate.ts"
  },

  "scripts": {
    "dev": "vite",
    "build": "vite build --mode client && vite build",
    "preview": "npm run build && wrangler dev",
    "deploy": "npm run build && wrangler deploy --env prod",
    "db:migrate": "npx tsx prisma/migrate.ts"
  },

I can make the dev server work by setting ssr.external to a list of the prisma libraries, but that doesn't solve the prod deployment

Gaming

Programming

Vite + D1 + Cloudflare Workers + Prisma

Did you find this page helpful?