bug: TRPCClientError: VercelPostgresError - 'invalid_connection_string': This connection string is meant to be used with a direct connection. Make sure to use a pooled connection string or try createClient() instead.

[AlejandroGutierrezB]

Provide environment information

System:
OS: macOS 14.5
CPU: (10) arm64 Apple M2 Pro
Memory: 75.56 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v16.15.0/bin/yarn
npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
pnpm: 9.5.0 - ~/.nvm/versions/node/v20.12.2/bin/pnpm
bun: 1.1.3 - ~/.bun/bin/bun
Watchman: 2024.04.08.00 - /opt/homebrew/bin/watchman

Describe the bug

Following the setup from the readme using a supabase database uri as the POSTGRES_URL in the .env , when running pnpm dev everything start no problem but then when visiting the client in localhost:3000 I get this error:

[auth][error] AdapterError: Read more at https://errors.authjs.dev#adaptererror
@acme/nextjs:dev: [auth][cause]: VercelPostgresError: VercelPostgresError - 'invalid_connection_string': This connection string is meant to be used with a direct connection. Make sure to use a pooled connection string or try `createClient()` instead.
@acme/nextjs:dev:     at createPool (webpack-internal:///(rsc)/../../node_modules/@vercel/postgres/dist/chunk-WDBQYBZQ.js:178:11)
@acme/nextjs:dev:     at Object.get (webpack-internal:///(rsc)/../../node_modules/@vercel/postgres/dist/chunk-WDBQYBZQ.js:217:16)
@acme/nextjs:dev:     at VercelPgPreparedQuery.execute (webpack-internal:///(rsc)/../../node_modules/drizzle-orm/vercel-postgres/session.js:49:35)
@acme/nextjs:dev:     at eval (webpack-internal:///(rsc)/../../node_modules/drizzle-orm/pg-core/query-builders/select.js:713:30)
@acme/nextjs:dev:     at Object.startActiveSpan (webpack-internal:///(rsc)/../../node_modules/drizzle-orm/tracing.js:14:14)
@acme/nextjs:dev:     at PgSelectBase.execute (webpack-internal:///(rsc)/../../node_modules/drizzle-orm/pg-core/query-builders/select.js:712:60)
@acme/nextjs:dev:     at PgSelectBase.then (webpack-internal:///(rsc)/../../node_modules/drizzle-orm/query-promise.js:26:17)
@acme/nextjs:dev:     at getSessionAndUser (webpack-internal:///(rsc)/../../node_modules/@auth/drizzle-adapter/lib/pg.js:132:18)
@acme/nextjs:dev:     at acc.<computed> (webpack-internal:///(rsc)/../../node_modules/@auth/core/lib/init.js:178:30)
@acme/nextjs:dev:     at Module.session (webpack-internal:///(rsc)/../../node_modules/@auth/core/lib/actions/session.js:67:36)
@acme/nextjs:dev:     at AuthInternal (webpack-internal:///(rsc)/../../node_modules/@auth/core/lib/index.js:47:77)
@acme/nextjs:dev:     at async Auth (webpack-internal:///(rsc)/../../node_modules/@auth/core/index.js:126:34)
@acme/nextjs:dev: [auth][details]: {}
@acme/nextjs:dev: [auth][error] SessionTokenError: Read more at https://errors.authjs.dev#sessiontokenerror
@acme/nextjs:dev: [auth][cause]: VercelPostgresError: VercelPostgresError - 'invalid_connection_string': This connection string is meant to be used with a direct connection. Make sure to use a pooled connection string or try `createClient()` instead.
@acme/nextjs:dev:     at createPool (webpack-internal:///(rsc)/../../node_modules/@vercel/postgres/dist/chunk-WDBQYBZQ.js:178:11)
@acme/nextjs:dev:     at Object.get (webpack-internal:///(rsc)/../../node_modules/@vercel/postgres/dist/chunk-WDBQYBZQ.js:217:16)
@acme/nextjs:dev:     at VercelPgPreparedQuery.execute (webpack-internal:///(rsc)/../../node_modules/drizzle-orm/vercel-postgres/session.js:49:35)
@acme/nextjs:dev:     at eval (webpack-internal:///(rsc)/../../node_modules/drizzle-orm/pg-core/query-builders/select.js:713:30)
@acme/nextjs:dev:     at Object.startActiveSpan (webpack-internal:///(rsc)/../../node_modules/drizzle-orm/tracing.js:14:14)
@acme/nextjs:dev:     at PgSelectBase.execute (webpack-internal:///(rsc)/../../node_modules/drizzle-orm/pg-core/query-builders/select.js:712:60)
@acme/nextjs:dev:     at PgSelectBase.then (webpack-internal:///(rsc)/../../node_modules/drizzle-orm/query-promise.js:26:17)
@acme/nextjs:dev:     at getSessionAndUser (webpack-internal:///(rsc)/../../node_modules/@auth/drizzle-adapter/lib/pg.js:132:18)
@acme/nextjs:dev:     at acc.<computed> (webpack-internal:///(rsc)/../../node_modules/@auth/core/lib/init.js:178:30)
@acme/nextjs:dev:     at Module.session (webpack-internal:///(rsc)/../../node_modules/@auth/core/lib/actions/session.js:67:36)
@acme/nextjs:dev:     at AuthInternal (webpack-internal:///(rsc)/../../node_modules/@auth/core/lib/index.js:47:77)
@acme/nextjs:dev:     at async Auth (webpack-internal:///(rsc)/../../node_modules/@auth/core/index.js:126:34)
@acme/nextjs:dev: [auth][details]: {}
@acme/nextjs:dev: >>> tRPC Request from rsc by undefined
@acme/nextjs:dev: A query that was dehydrated as pending ended up rejecting. [[["post","all"],{"type":"query"}]]: TRPCError: VercelPostgresError - 'invalid_connection_string': This connection string is meant to be used with a direct connection. Make sure to use a pooled connection string or try `createClient()` instead.; The error will be redacted in production builds
@acme/nextjs:dev:  ⨯ Internal error: Error: redacted
@acme/nextjs:dev:     at eval (../../node_modules/@tanstack/query-core/build/modern/hydration.js:37:31)
@acme/next

<details>
<summary>Details</summary>



</details>

js:dev: digest: "2204419119"
@acme/nextjs:dev:  ⨯ Internal error: Error: redacted
@acme/nextjs:dev:     at eval (../../node_modules/@tanstack/query-core/build/modern/hydration.js:37:31)
@acme/nextjs:dev: digest: "2204419119"
@acme/nextjs:dev:  GET / 200 in 1233ms```

### Link to reproduction

https://github.com/t3-oss/create-t3-turbo

### To reproduce

Follow the quickstart from the readme up to  `pnpm dev`

### Additional information

_No response_

[juliusmarminge]

Make sure your url follows the format of the example env, including the query param

[LinnJS]

Make sure your url follows the format of the example env, including the query param

@juliusmarminge what about for database sources other than supabase I see the URL param is postgres?workaround=supabase-pooler.vercel I am strugling to find a way to get this working with a database hosted on Heroku with the drizzel postgres-node driver since the apps in the turborepo will be hosted on Heroku as well. Have spent a couple days on this would love some help really want to get this working with t3-turbo-repo.

I fought through endless TS errors and got to a point where the pnpn db:push works but when running the app I get the following error.

 data: {
│   code: 'INTERNAL_SERVER_ERROR',
│   httpStatus: 500,
│   stack: 'TypeError: net.Socket is not a constructor\n    at getStream (webpack-inte
│ rnal:///(rsc)/../../node_modules/pg/lib/stream.js:23:12)\n    at new Connection (web
│ pack-internal:///(rsc)/../../node_modules/pg/lib/connection.js:18:36)\n    at new Cl
│ ient (webpack-internal:///(rsc)/../../node_modules/pg/lib/client.js:48:7)\n    at Bo
│ undPool.newClient (webpack-internal:///(rsc)/../../node_modules/pg-pool/index.js:218
│ :20)\n    at BoundPool.connect (webpack-internal:///(rsc)/../../node_modules/pg-pool
│ /index.js:212:10)\n    at BoundPool.query (webpack-internal:///(rsc)/../../node_modu
│ les/pg-pool/index.js:399:10)\n    at eval (webpack-internal:///(rsc)/../../node_modu
│ les/drizzle-orm/node-postgres/session.js:102:23)\n    at Object.startActiveSpan (web
│ pack-internal:///(rsc)/../../node_modules/drizzle-orm/tracing.js:14:14)\n    at eval
│  (webpack-internal:///(rsc)/../../node_modules/drizzle-orm/node-postgres/session.js:
│ 96:76)\n    at Object.startActiveSpan (webpack-internal:///(rsc)/../../node_modules/
│ drizzle-orm/tracing.js:14:14)',
│   path: 'post.all',
│   zodError: null
│ },
│   name: 'TRPCClientError'
│ },
│   elapsedMs: 934
│ }
│  ⨯ Internal error: TRPCClientError: net.Socket is not a constructor
│     at TRPCClientError.from (../../node_modules/@trpc/client/dist/TRPCClientError.mj
│ s:40:20)
│     at eval (../../node_modules/@trpc/client/dist/links/httpBatchStreamLink.mjs:125:
│ 106)
│     at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
│ digest: "3834349792"
│  GET / 200 in 4702ms
│ [TRPC] post.all took 401ms to execute
│ >>> tRPC Error on 'post.all'  [TRPCError: net.Socket is not a constructor] {
│   code: 'INTERNAL_SERVER_ERROR',
│   name: 'TRPCError'
│ }
│  GET /api/trpc/post.all?batch=1&input=%7B%220%22%3A%7B%22json%22%3Anull%2C%22meta%22
│ %3A%7B%22values%22%3A%5B%22undefined%22%5D%7D%7D%7D 200 in 411ms
│ >>> tRPC Request from nextjs-react by undefined
│ [TRPC] post.all took 418ms to execute
│ >>> tRPC Error on 'post.all'  [TRPCError: net.Socket is not a constructor] {
│   code: 'INTERNAL_SERVER_ERROR',
│   name: 'TRPCError'
│ }
│  GET /api/trpc/post.all?batch=1&input=%7B%220%22%3A%7B%22json%22%3Anull%2C%22meta%22
│ %3A%7B%22values%22%3A%5B%22undefined%22%5D%7D%7D%7D 200 in 428ms
│ >>> tRPC Request from nextjs-react by undefined
│ [TRPC] post.all took 334ms to execute
│ >>> tRPC Error on 'post.all'  [TRPCError: net.Socket is not a constructor] {
│   code: 'INTERNAL_SERVER_ERROR',
│   name: 'TRPCError'
│ }
│  GET /api/trpc/post.all?batch=1&input=%7B%220%22%3A%7B%22json%22%3Anull%2C%22meta%22
│ %3A%7B%22values%22%3A%5B%22undefined%22%5D%7D%7D%7D 200 in 371ms
│ >>> tRPC Request from nextjs-react by undefined
│ [TRPC] post.all took 216ms to execute
│ >>> tRPC Error on 'post.all'  [TRPCError: net.Socket is not a constructor] {
│   code: 'INTERNAL_SERVER_ERROR',
│   name: 'TRPCError'
│ }
│  GET /api/trpc/post.all?batch=1&input=%7B%220%22%3A%7B%22json%22%3Anull%2C%22meta%22
│ %3A%7B%22values%22%3A%5B%22undefined%22%5D%7D%7D%7D 200 in 256ms
└────>
  x watch interrupted due to signal

Will go ahead and create my own issue.