bug: Errors with clean T3 install

[ScottyMaher]

Provide environment information

System:
OS: Windows 10 10.0.19045
CPU: (8) x64 Intel(R) Core(TM) i7-3770K CPU @ 3.50GHz
Memory: 5.50 GB / 15.89 GB
Binaries:
Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
bun: 1.1.22 - ~.bun\bin\bun.EXE

"ct3aMetadata": {
"initVersion": "7.36.2"
}

Describe the bug

1. Create a completely fresh T3 app.
2. Fix invalid environment variables:

NEXTAUTH_SECRET="sample"
NEXTAUTH_URL="http://localhost:3000"

# Next Auth Discord Provider
DISCORD_CLIENT_ID="placeholder"
DISCORD_CLIENT_SECRET="placeholder"

3. Literally just open or refresh the localhost site in browser:

[TRPC] post.getLatest took 153ms to execute
A query that was dehydrated as pending ended up rejecting. [[["post","getLatest"],{"type":"query"}]]: TRPCError: UNAUTHORIZED; The error will be redacted in production builds
Error: redacted
at eval (webpack-internal:///(rsc)/./node_modules/@tanstack/query-core/build/modern/hydration.js:37:31) {
digest: '1184500366'
}
GET / 200 in 8406ms
⨯ Internal error: Error: redacted
at eval (./node_modules/@tanstack/query-core/build/modern/hydration.js:37:31)
digest: "1184500366"
⨯ unhandledRejection: Error: redacted
at eval (webpack-internal:///(rsc)/./node_modules/@tanstack/query-core/build/modern/hydration.js:37:31) {
digest: '1184500366'
}
⨯ unhandledRejection: Error: redacted
at eval (webpack-internal:///(rsc)/./node_modules/@tanstack/query-core/build/modern/hydration.js:37:31) {
digest: '1184500366'
}

Reproduction repo

It's a fresh create t3-app@latest, with only the .env changed as described

To reproduce

◇ Will you be using TypeScript or JavaScript?
│ TypeScript
│
◇ Will you be using Tailwind CSS for styling?
│ Yes
│
◇ Would you like to use tRPC?
│ Yes
│
◇ What authentication provider would you like to use?
│ NextAuth.js
│
◇ What database ORM would you like to use?
│ None (I also tried with Prisma)
│
◇ Would you like to use Next.js App Router?
│ Yes

Additional information

I tried GPTing my way to a solution, but it was not helpful.

[lorenzobandini]

I have the same errors

[lorenzocorallo]

I'm getting something very similar (fresh setup with tRPC, NextAuth, Drizzle)

[TRPC] post.hello took 373ms to execute
[TRPC] post.getLatest took 120ms to execute
A query that was dehydrated as pending ended up rejecting. [[["post","getLatest"],{"type":"query"}]]: TRPCError: RequestInit: duplex option is required when sending a body.; The error will be redacted in production builds
 ⨯ Internal error: Error: redacted
    at eval (./node_modules/.pnpm/@[email protected]/node_modules/@tanstack/query-core/build/modern/hydration.js:37:31)
digest: "2433427594"
Error: redacted
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@[email protected]/node_modules/@tanstack/query-core/build/modern/hydration.js:37:31) {
  digest: '2433427594'
}

[lorenzocorallo]

I'm getting something very similar (fresh setup with tRPC, NextAuth, Drizzle)

[TRPC] post.hello took 373ms to execute
[TRPC] post.getLatest took 120ms to execute
A query that was dehydrated as pending ended up rejecting. [[["post","getLatest"],{"type":"query"}]]: TRPCError: RequestInit: duplex option is required when sending a body.; The error will be redacted in production builds
 ⨯ Internal error: Error: redacted
    at eval (./node_modules/.pnpm/@[email protected]/node_modules/@tanstack/query-core/build/modern/hydration.js:37:31)
digest: "2433427594"
Error: redacted
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@[email protected]/node_modules/@tanstack/query-core/build/modern/hydration.js:37:31) {
  digest: '2433427594'
}

I succeeded to fix my issue by re-creating the project via an older version of t3-app, in particular the 7.34.0.
I think that the issue is related to the changes introduced in the PR #1932

[Guria]

I was able to fix it in 7.36.2 by adding await to getLatest.prefetch.
But I am not sure that it is a proper solution since it gives a different behaviour that potentially can be unwanted.

void await api.post.getLatest.prefetch();

[eltonstewart]

that worked for me too @Guria

[ryanhell]

can confirm adding await to line #11 of page.tsx inside the app folder; also worked for me to eliminate this error message. Will check back to see if there is any new information..

[Guria]

@eltonstewart @ryanhell Please don't treat it as long term fix.
Adding await here changes expected behaviour. General idea is just trigger getting result at early stage, but don't block page loading and return Suspense fallback.

This issue still requires investigation and proper long term fix. Personally I decided to bootstrap with 7.34 version.

[NightClover-code]

Just had this exact same error and @Guria's temporary fix works for me.

[Guria]

@eltonstewart @ryanhell @NightClover-code @ScottyMaher @lorenzocorallo
can you share which DB adapter have you used? Drizzle or Prisma?

[lorenzocorallo]

@eltonstewart @ryanhell @NightClover-code @ScottyMaher @lorenzocorallo

can you share which DB adapter have you used? Drizzle or Prisma?

I'm using Drizzle with a Turso database

[Guria]

Hmm. With latest 7.37 I have this issue with Postgres + Prisma, and no issue with Postgres + Drizzle.

[Guria]

Ok, I've found the descrepancy.
One template use getLatest: protectedProcedure.query and another one getLatest: publicProcedure.query.
So proper solution is not to prefetch getLatest in signed out state.
I will prepare a fix for affected templates.

[electroheadfx]

I have the same issue !

[Guria]

@electroheadfx just make prefetch conditional based on session. See #1969