Remix + Cloudflare + Prisma で、Node.jsとWrangler実行時にimportを適切に切り替える

1import {
2  vitePlugin as remix,
3  cloudflareDevProxyVitePlugin as remixCloudflareDevProxy,
4} from "@remix-run/dev";
5import { defineConfig } from "vite";
6import tsconfigPaths from "vite-tsconfig-paths";
7import path from "path";
8
9export default defineConfig({
10  resolve: {
11    alias:
12      process.env.NODE_ENV === "development"
13        ? {
14            "~/prisma": path.resolve(__dirname, "./app/prisma/index.dev"),
15          }
16        : undefined,
17  },
18  plugins: [
19    remixCloudflareDevProxy(),
20    remix({
21      future: {
22        v3_fetcherPersist: true,
23        v3_relativeSplatPath: true,
24        v3_throwAbortReason: true,
25      },
26    }),
27    tsconfigPaths(),
28  ],
29});

1export * from "@prisma/adapter-pg-worker";
2import pg from "@prisma/pg-worker";
3export const Pool = pg.Pool;

1export * from "@prisma/adapter-pg";
2import pg from "pg";
3export const Pool = pg.Pool;

1import { LoaderFunctionArgs } from "@remix-run/cloudflare";
2import { Pool, PrismaPg } from "~/prisma";
3import { PrismaClient } from "@prisma/client";
4import { useLoaderData } from "@remix-run/react";
5
6export default function Index() {
7  const values = useLoaderData<string[]>();
8  return (
9    <div>
10      {values.map((v) => (
11        <div key={v}>{v}</div>
12      ))}
13    </div>
14  );
15}
16
17export async function loader({
18  context,
19}: LoaderFunctionArgs): Promise<string[]> {
20  const url = new URL(context.cloudflare.env.DATABASE_URL);
21  const schema = url.searchParams.get("schema") ?? undefined;
22  const pool = new Pool({
23    connectionString: context.cloudflare.env.DATABASE_URL,
24  });
25  const adapter = new PrismaPg(pool, { schema });
26  const prisma = new PrismaClient({ adapter });
27  await prisma.test.create({ data: {} });
28  return prisma.test.findMany().then((r) => r.map(({ id }) => id));
29}