[BUG]: Issue in DEV with Remix/Vite/Drizzle/Cloudflare Pages/Supabase

[l4j3b]

What version of drizzle-orm are you using?

0.30.8

What version of drizzle-kit are you using?

0.20.14

Describe the Bug

Hi,

I am experiencing with my setup in dev mode (it works if I build and serve my project) with my Remix app.

I am using Remix/Vite/Drizzle/Cloudflare Pages/Supabase.

The issue seems to be cause by the await db.query.users.findMany() in my loader:

export async function loader({ context }: LoaderFunctionArgs) {
  const client = postgres(context.env.DATABASE_URL);
  const db = drizzle(client, { schema: { users } });

  const allUsers = await db.query.users.findMany();

  return json({ allUsers });
}

My vite config:

import { vitePlugin as remix, cloudflareDevProxyVitePlugin as remixCloudflareDevProxy } from "@remix-run/dev";
import { getLoadContext } from "./load-context";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [remixCloudflareDevProxy({ getLoadContext }), remix(), tsconfigPaths()],
});

The error I am getting:

Error: Only URLs with a scheme in: file, data are supported by the default ESM loader. Received protocol 'cloudflare:'
    at new NodeError (node:internal/errors:393:5)
    at throwIfUnsupportedURLScheme (node:internal/modules/esm/resolve:1026:11)
    at defaultResolve (node:internal/modules/esm/resolve:1106:3)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:841:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ESMLoader.import (node:internal/modules/esm/loader:525:22)
    at importModuleDynamically (node:internal/modules/esm/translators:110:35)
    at importModuleDynamicallyCallback (node:internal/process/esm_loader:35:14)
    at EventEmitter.connect (file:///Users/jeb/test-cf/node_modules/postgres/cf/polyfills.js:150:27)
    at Timeout.connect [as _onTimeout] (file:///Users/jeb/test-cf/node_modules/postgres/cf/src/connection.js:347:12) {
  code: 'ERR_UNSUPPORTED_ESM_URL_SCHEME'

My scripts:

"scripts": {
    "build": "remix vite:build",
    "deploy": "wrangler pages deploy ./build/client",
    "dev": "remix vite:dev",
    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
    "start": "wrangler pages dev ./build/client",
    "typecheck": "tsc",
    "typegen": "wrangler types",
  },

As stated above, if I do npm run build && npm run start, it works. The issue happens with npm run dev.

I have tried quite a few things:

• different NodeJS version: 19, 20, 21.
• tried with neon (it works).
• tried with a local postgres db/not supabase (same error).

I think it may be an issue with remix/vite/postgres? I spent quite a bit of time looking into it but have not been able to able to debug it. I have limited time and was wondering if someone else ran into that issue.

I tried with drizzle-orm/node-postgres. It works locally but not in prod as pg is using Node.

✘ [ERROR] Build failed with 12 errors:

  ../node_modules/pg-connection-string/index.js:76:77: ERROR: Could not resolve "fs"
  ../node_modules/pg/lib/connection-parameters.js:3:18: ERROR: Could not resolve "dns"
  ../node_modules/pg/lib/connection.js:3:18: ERROR: Could not resolve "net"
  ../node_modules/pg/lib/crypto/utils-legacy.js:5:27: ERROR: Could not resolve "crypto"
  ../node_modules/pg/lib/crypto/utils-webcrypto.js:1:27: ERROR: Could not resolve "crypto"
  ...

So I guess I can use pg in "dev" and "postgres" for the build for now but I would prefer not to.

Expected behavior

No response

Environment & setup

No response

[l4j3b]

Moving to: remix-run/remix#9245