Prisma•2w ago

Prisma with `@cloudflare/vite-plugin`

Did somebody manage to run prisma with @cloudflare/vite-plugin ? I am trying use react-router with Cloudflare and no luck. I tried both prisma-client and prisma-client-js providers and it doesn't work.

8 Replies

Prisma AI Help•2w ago

You opted for speed from this bot. Let's conjure up an answer right now! Running Prisma with @cloudflare/vite-plugin (or similar Vite-based Cloudflare integrations) can be tricky due to how Vite bundles dependencies and how Prisma expects to be used in edge environments like Cloudflare Workers or Pages. Key points from the knowledge sources: - When using Vite (or plugins like @cloudflare/vite-plugin), you often need to externalize Prisma dependencies in your Vite config. If you don't, Vite may try to bundle Prisma, which can break things, especially in SSR or edge environments. For example, in a Hono + Cloudflare Pages setup, adding the following to your Vite config can resolve issues:

  export default defineConfig({
    ssr: {
      external: ['@prisma/client', '@prisma/adapter-d1'],
    },
    // ...other config
  });

  export default defineConfig({
    ssr: {
      external: ['@prisma/client', '@prisma/adapter-d1'],
    },
    // ...other config
  });

Or, if using a plugin like @hono/vite-cloudflare-pages, you can pass the external option directly to the plugin Error thrown using PrismaClient in Cloudflare Pages project. - For React Router, there was a related issue where Vite misconfiguration caused Prisma resolution errors. Upgrading React Router to v7.1.2+ and ensuring proper Vite config (externalizing Prisma) resolved the issue for some users @prisma/client failed to resolve entry. - If you are targeting Cloudflare Workers/Pages, you must use Prisma's Driver Adapters (e.g., @prisma/adapter-d1 for D1) and enable the driverAdapters preview feature in your schema.prisma. Standard Prisma Client will not work in these environments Unable to run prisma with cloud cloudfare workers. - If you see errors like "PrismaClient is not configured to run in Cloudflare Workers," it means you need to use the correct adapter and configuration. Summary:
Yes, it is possible to run Prisma with Vite and Cloudflare, but you must: - Externalize Prisma in your Vite config. - Use the correct dr iver adapter and enable driverAdapters in your Prisma schema. - For React Router, ensure you are using a compatible version and proper Vite config. If you still encounter issues, please share your Vite config and Prisma setup for more targeted help. 🤔 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.

huv1kOP•2w ago

When using

generator client {
  provider        = "prisma-client"
  previewFeatures = ["driverAdapters"]
  output          = "../app/generated/prisma"
}

generator client {
  provider        = "prisma-client"
  previewFeatures = ["driverAdapters"]
  output          = "../app/generated/prisma"
}

I am hitting No such module "node:os". this is most likelly issue on Cloudflare side, node compact mode doesn't work properly :shrug: When using

generator client {
  provider               = "prisma-client"
  previewFeatures        = ["driverAdapters"]
  output                 = "../app/generated/prisma"
  runtime                = "workerd"
  moduleFormat           = "esm"
  generatedFileExtension = "ts"
  importFileExtension    = "ts"
}

generator client {
  provider               = "prisma-client"
  previewFeatures        = ["driverAdapters"]
  output                 = "../app/generated/prisma"
  runtime                = "workerd"
  moduleFormat           = "esm"
  generatedFileExtension = "ts"
  importFileExtension    = "ts"
}

There is error @prisma/client/runtime/query_engine_bg.sqlite.wasm" not found. Does the file exist?

jonfanz•2w ago

Could you try adding the preview feature queryCompiler as well?

huv1kOP•2w ago

Same @prisma/client/runtime/query_engine_bg.sqlite.wasm" not found. Does the file exist? 🙈 What I did is basically pnpm create cloudflare prisma-app --framework=react-router

import { createRequestHandler } from "react-router";
import { PrismaClient } from "../app/generated/prisma";
import { PrismaD1 } from "@prisma/adapter-d1";

declare module "react-router" {
  export interface AppLoadContext {
    cloudflare: {
      env: Env;
      ctx: ExecutionContext;
    };
    prisma: PrismaClient;
  }
}

// Update Env interface to include D1 database
interface Env {
  DB: D1Database;
  VALUE_FROM_CLOUDFLARE: string;
}

const requestHandler = createRequestHandler(
  () => import("virtual:react-router/server-build"),
  import.meta.env.MODE
);

export default {
  async fetch(request, env, ctx) {
    // Initialize PrismaClient with D1 adapter
    const adapter = new PrismaD1(env.DB);
    const prisma = new PrismaClient({ adapter });

    // Handle the request
    try {
      return requestHandler(request, {
        cloudflare: { env, ctx },
        prisma,
      });
    } catch (error) {
      console.error("Request error:", error);
      return new Response("Internal Server Error", { status: 500 });
    } finally {
      // Disconnect Prisma client when done
      await prisma.$disconnect();
    }
  },
} satisfies ExportedHandler<Env>;

import { createRequestHandler } from "react-router";
import { PrismaClient } from "../app/generated/prisma";
import { PrismaD1 } from "@prisma/adapter-d1";

declare module "react-router" {
  export interface AppLoadContext {
    cloudflare: {
      env: Env;
      ctx: ExecutionContext;
    };
    prisma: PrismaClient;
  }
}

// Update Env interface to include D1 database
interface Env {
  DB: D1Database;
  VALUE_FROM_CLOUDFLARE: string;
}

const requestHandler = createRequestHandler(
  () => import("virtual:react-router/server-build"),
  import.meta.env.MODE
);

export default {
  async fetch(request, env, ctx) {
    // Initialize PrismaClient with D1 adapter
    const adapter = new PrismaD1(env.DB);
    const prisma = new PrismaClient({ adapter });

    // Handle the request
    try {
      return requestHandler(request, {
        cloudflare: { env, ctx },
        prisma,
      });
    } catch (error) {
      console.error("Request error:", error);
      return new Response("Internal Server Error", { status: 500 });
    } finally {
      // Disconnect Prisma client when done
      await prisma.$disconnect();
    }
  },
} satisfies ExportedHandler<Env>;

jonfanz•2w ago

I’ll have to look into this more, but make sure you re-generated your client

huv1kOP•2w ago

I tried all possible combinations 🙈 I was expecting this is going to work fine. It's not the case, so hopefully soon 🤞

huv1kOP•2w ago

https://github.com/cloudflare/workers-sdk/pull/8283 I think this is same issue 😅

GitHub

vite-plugin: Reproduce hanging prisma issue by justinvdm · Pull Re...

Context We&#39;re running into an issue when using prisma with @cloudflare/vite-plugin, where calls to the db (e.g. db.users.findMany()) cause the request into the worker to hang indefinitely (...

huv1kOP•7d ago

I had to do this

import { resolve } from "node:path";
import { cloudflare } from "@cloudflare/vite-plugin";
import { reactRouter } from "@react-router/dev/vite";
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig(() => {
  const wasmPath = resolve(__dirname, "node_modules/.prisma/client/wasm.js");

  return {
    resolve: {
      alias: {
        "@prisma/client": resolve(
          __dirname,
          "node_modules",
          "@prisma",
          "client"
        ),
      },
    },
    optimizeDeps: {
      esbuildOptions: {
        plugins: [
          {
            name: "prisma-local-plugin",
            setup(build: any) {
              build.onResolve(
                { filter: /^.prisma\/client\/default/ },
                async () => {
                  return {
                    path: wasmPath,
                  };
                }
              );
            },
          },
        ],
      },
    },
    plugins: [
      cloudflare({ viteEnvironment: { name: "ssr" } }),
      tailwindcss(),
      reactRouter(),
      tsconfigPaths(),
    ],
  };
});

import { resolve } from "node:path";
import { cloudflare } from "@cloudflare/vite-plugin";
import { reactRouter } from "@react-router/dev/vite";
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig(() => {
  const wasmPath = resolve(__dirname, "node_modules/.prisma/client/wasm.js");

  return {
    resolve: {
      alias: {
        "@prisma/client": resolve(
          __dirname,
          "node_modules",
          "@prisma",
          "client"
        ),
      },
    },
    optimizeDeps: {
      esbuildOptions: {
        plugins: [
          {
            name: "prisma-local-plugin",
            setup(build: any) {
              build.onResolve(
                { filter: /^.prisma\/client\/default/ },
                async () => {
                  return {
                    path: wasmPath,
                  };
                }
              );
            },
          },
        ],
      },
    },
    plugins: [
      cloudflare({ viteEnvironment: { name: "ssr" } }),
      tailwindcss(),
      reactRouter(),
      tsconfigPaths(),
    ],
  };
});

Gaming

Programming

Prisma with `@cloudflare/vite-plugin`

Did you find this page helpful?