bug: Cannot change planetscale to postgres.js

[maxifom]

Provide environment information

System:
OS: Linux 6.2 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
Memory: 17.46 GB / 31.24 GB
Container: Yes
Shell: 5.8.1 - /usr/bin/zsh
Binaries:
Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm

Describe the bug

After changing planetscale to postgres.js in drizzle error occurs in nextjs.
Error:

ModuleBuildError: Module build failed: UnhandledSchemeError: Reading from "cloudflare:sockets" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "cloudflare:" URIs.

Link to reproduction

maxifom/test-qqq@04c7cb7

To reproduce

pnpm i && pnpm --filter nextjs dev
go to http://localhost:3000

See error:

ModuleBuildError: Module build failed: UnhandledSchemeError: Reading from "cloudflare:sockets" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "cloudflare:" URIs.

Additional information

No response

[maxifom]

fixed by #634 (comment)
I think it should be really nice to include it in the README to avoid confusion. And it should clearely state in the warning something like this

Note
The db package is preconfigured to use PlanetScale and is edge-bound with the database.js driver. If you're using something else, make the necesary modifications to the schema as well as the client and the drizzle config. If you want to switch to non-edge database driver, remove export const runtime = "edge"; from all pages and api routes.

[ludalex]

Sorry to reopen this.

By commenting runtime = "edge" everywhere, and by using the drizzle postgres.js driver for local development with a local pg database, it kinda works (as in it can read and write from the db) but for every tRPC query an error like this is thrown:

@acme/nextjs:dev:  << query  #1 post.all  {
@acme/nextjs:dev:   input: undefined,
@acme/nextjs:dev:   result: TRPCClientError: fetch failed
@acme/nextjs:dev:       at TRPCClientError.from (webpack-internal:///(ssr)/../../node_modules/@trpc/client/dist/TRPCClientError-0de4d231.mjs:41:16)
@acme/nextjs:dev:       at eval (webpack-internal:///(ssr)/../../node_modules/@trpc/client/dist/httpBatchLink-204206a5.mjs:207:101)
@acme/nextjs:dev:       at runNextTicks (node:internal/process/task_queues:60:5)
@acme/nextjs:dev:       at process.processTimers (node:internal/timers:504:9) {
@acme/nextjs:dev:     meta: undefined,
@acme/nextjs:dev:     shape: undefined,
@acme/nextjs:dev:     data: undefined,
@acme/nextjs:dev:     [cause]: TypeError: fetch failed
@acme/nextjs:dev:         at Object.fetch (node:internal/deps/undici/undici:14062:11)
@acme/nextjs:dev:         at runNextTicks (node:internal/process/task_queues:60:5)
@acme/nextjs:dev:         at process.processTimers (node:internal/timers:504:9) {
@acme/nextjs:dev:       cause: [InvalidArgumentError]
@acme/nextjs:dev:     }
@acme/nextjs:dev:   },
@acme/nextjs:dev:   elapsedMs: 9
@acme/nextjs:dev: }
@acme/nextjs:dev:  ⨯ ../node_modules/@trpc/client/dist/TRPCClientError-0de4d231.mjs (37:15) @ TRPCClientError.from
@acme/nextjs:dev:  ⨯ Internal error: TRPCClientError: fetch failed
@acme/nextjs:dev:     at TRPCClientError.from (../../node_modules/@trpc/client/dist/TRPCClientError-0de4d231.mjs:41:16)
@acme/nextjs:dev:     at eval (../../node_modules/@trpc/client/dist/httpBatchLink-204206a5.mjs:207:101)
@acme/nextjs:dev:     at runNextTicks (node:internal/process/task_queues:60:5)
@acme/nextjs:dev:     at process.processTimers (node:internal/timers:504:9)
@acme/nextjs:dev: Cause: TypeError: fetch failed
@acme/nextjs:dev:     at Object.fetch (node:internal/deps/undici/undici:14062:11)
@acme/nextjs:dev:     at runNextTicks (node:internal/process/task_queues:60:5)
@acme/nextjs:dev:     at process.processTimers (node:internal/timers:504:9) {
@acme/nextjs:dev:   cause: InvalidArgumentError: invalid connection header
@acme/nextjs:dev:       at processHeader (node:internal/deps/undici/undici:7595:15)
@acme/nextjs:dev:       at new Request (node:internal/deps/undici/undici:7478:13)
@acme/nextjs:dev:       at [dispatch] (node:internal/deps/undici/undici:8645:25)
@acme/nextjs:dev:       at Intercept (node:internal/deps/undici/undici:8392:20)
@acme/nextjs:dev:       at [Intercepted Dispatch] (node:internal/deps/undici/undici:7764:16)
@acme/nextjs:dev:       at Client.dispatch (node:internal/deps/undici/undici:7780:44)
@acme/nextjs:dev:       at [dispatch] (node:internal/deps/undici/undici:9942:32)
@acme/nextjs:dev:       at [Intercepted Dispatch] (node:internal/deps/undici/undici:7757:33)
@acme/nextjs:dev:       at Pool.dispatch (node:internal/deps/undici/undici:7780:44)
@acme/nextjs:dev:       at [dispatch] (node:internal/deps/undici/undici:10282:27)
@acme/nextjs:dev:       at Agent.Intercept (node:internal/deps/undici/undici:8392:20)
@acme/nextjs:dev:       at Agent.dispatch (node:internal/deps/undici/undici:7780:44)
@acme/nextjs:dev:       at node:internal/deps/undici/undici:13956:83
@acme/nextjs:dev:       at new Promise (<anonymous>)
@acme/nextjs:dev:       at dispatch (node:internal/deps/undici/undici:13956:16)
@acme/nextjs:dev:       at httpNetworkFetch (node:internal/deps/undici/undici:13864:65)
@acme/nextjs:dev:       at httpNetworkOrCacheFetch (node:internal/deps/undici/undici:13766:39)
@acme/nextjs:dev:       at httpFetch (node:internal/deps/undici/undici:13618:43)
@acme/nextjs:dev:       at schemeFetch (node:internal/deps/undici/undici:13546:24)
@acme/nextjs:dev:       at node:internal/deps/undici/undici:13422:26
@acme/nextjs:dev:       at mainFetch (node:internal/deps/undici/undici:13439:11)
@acme/nextjs:dev:       at fetching (node:internal/deps/undici/undici:13396:7)
@acme/nextjs:dev:       at fetch2 (node:internal/deps/undici/undici:13274:20)
@acme/nextjs:dev:       at Object.fetch (node:internal/deps/undici/undici:14060:18)
@acme/nextjs:dev:       at fetch (node:internal/process/pre_execution:237:25)
@acme/nextjs:dev:       at R (/Users/ldx/Repositories/t3-turbo-appdir/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:340205)
@acme/nextjs:dev:       at doOriginalFetch (webpack-internal:///(rsc)/../../node_modules/next/dist/server/lib/patch-fetch.js:376:24)
@acme/nextjs:dev:       at eval (webpack-internal:///(rsc)/../../node_modules/next/dist/server/lib/patch-fetch.js:504:20)
@acme/nextjs:dev:       at eval (webpack-internal:///(rsc)/../../node_modules/next/dist/server/lib/trace/tracer.js:125:36)
@acme/nextjs:dev:       at NoopContextManager.with (webpack-internal:///(rsc)/../../node_modules/next/dist/compiled/@opentelemetry/api/index.js:360:30)
@acme/nextjs:dev:       at ContextAPI.with (webpack-internal:///(rsc)/../../node_modules/next/dist/compiled/@opentelemetry/api/index.js:30:58)
@acme/nextjs:dev:       at NoopTracer.startActiveSpan (webpack-internal:///(rsc)/../../node_modules/next/dist/compiled/@opentelemetry/api/index.js:953:34)
@acme/nextjs:dev:       at ProxyTracer.startActiveSpan (webpack-internal:///(rsc)/../../node_modules/next/dist/compiled/@opentelemetry/api/index.js:993:36)
@acme/nextjs:dev:       at eval (webpack-internal:///(rsc)/../../node_modules/next/dist/server/lib/trace/tracer.js:114:103)
@acme/nextjs:dev:       at NoopContextManager.with (webpack-internal:///(rsc)/../../node_modules/next/dist/compiled/@opentelemetry/api/index.js:360:30)
@acme/nextjs:dev:       at ContextAPI.with (webpack-internal:///(rsc)/../../node_modules/next/dist/compiled/@opentelemetry/api/index.js:30:58)
@acme/nextjs:dev:       at NextTracerImpl.trace (webpack-internal:///(rsc)/../../node_modules/next/dist/server/lib/trace/tracer.js:114:28)
@acme/nextjs:dev:       at globalThis.fetch (webpack-internal:///(rsc)/../../node_modules/next/dist/server/lib/patch-fetch.js:194:47)
@acme/nextjs:dev:       at fetchHTTPResponse (webpack-internal:///(ssr)/../../node_modules/@trpc/client/dist/httpUtils-f58ceda1.mjs:108:32)
@acme/nextjs:dev:       at runNextTicks (node:internal/process/task_queues:60:5)
@acme/nextjs:dev:       at process.processTimers (node:internal/timers:504:9) {
@acme/nextjs:dev:     code: 'UND_ERR_INVALID_ARG'
@acme/nextjs:dev:   }
@acme/nextjs:dev: }

By removing the headers function from the unstable_httpBatchStreamLink in the TRPCReactProvider (apps/nextjs/src/app/providers.tsx) the error disappears, but we do lose the session context in some cases.
I tried with httpBatchLink but I get the same exact error.

I general, what's the suggested solution for local development?

I know we might be limited by the state of current technologies and how they interplay with each other, but developing locally against a remote database is really not the best DX.
And at the same time, developing locally on a different runtime from the one used in production can lead to disasters.

[joshsmith]

@juliusmarminge bumping the comment made by @ludalex above, since this is closed and you have probably not seen it.