bug: 7.22.0 next build error TRPCClientError: Dynamic server usage #1599

player0x3 · 2023-10-16T16:07:24Z

Provide environment information

"ct3aMetadata": {
"initVersion": "7.22.0"
},

Describe the bug

Reproduction repo

.

To reproduce

when：

install： pnpm create t3-app@latest
use nextjs appdir option
build： pnpm build

Additional information

No response

The text was updated successfully, but these errors were encountered:

beaumccartney · 2023-10-16T16:37:46Z

same deal here

beaumccartney · 2023-10-16T16:43:37Z

#1567 (comment)

this fix got rid of the issue for me - should it ship with by default?

player0x3 · 2023-10-17T08:31:29Z

#1567 (comment)

this fix got rid of the issue for me - should it ship with by default?

The version released for this Merged is 7.22.0, which is what I'm using, and when my nextjs selects appdir and package management uses pnpm, the problem must exist, I've tried it over and over again a few times.

dBianchii · 2023-10-17T23:53:09Z

Same happening here!

c-ehrlich · 2023-10-18T09:08:41Z

Thanks for the issue. Can reproduce. Weirdly enough this issue exists for the hello query but not for the query that gets all posts. force-dynamic works as a band-aid, but feels less than optimal. Will research further.

dBianchii · 2023-10-18T12:48:24Z

I was trying to investigate this and I'm reading this page but I'm not understanding anything about it. If someone understands this in some way and would like to explain in more layman's terms, I would appreciate it.
I believe the error is coming from here:

create-t3-app/cli/template/extras/src/trpc/server.ts

Line 23 in d1a8955

heads.set("x-trpc-source", "rsc");

markomitranic · 2023-10-19T11:35:33Z

Update: was spreading misinformation, still no real solution. Edited with comments.

@c-ehrlich While I have no idea why it happens, like you said, here is some info from my limited testing, that I hope proves useful. :)

I can see that using TRPCReactProvider on a layout level produces a DYNAMIC_SERVER_USAGE error as it is unable to produce the entire page statically due to a use of headers.

When I instead move the provider elsewhere, and only have it wrap the actual components that wish to access ~/trpc/react, the error disappears as it is now limiting the dynamicness only to a certain component. It ain't pretty, as it requires us to wrap components. In this scenario I didn't have to resort to forcing dynamic, it seems to be able to decide on its own.

~~What I do for now is move the TRPCReactProvider into page.tsx, and have it only in pages that actually have components that use it. Feels like an ok solution for now.~~ Not an ok solution, as it forces the entire page into a λ state instead of a SSG.

Now, not saying this is a solution but leaving this here hoping it is helpful to someone, until we find a better one...

~~All the while, ~/trpc/server works just fine without a need of a provider, and produces no errors. :)~~ No idea what happened there, it most definitely produces errors during build, due to using headers in the server render phase. The file server.ts uses next/headers const heads = new Map(headers()); which causes the error we see. Replacing it with new Headers() helps pass the error, but fails to actually fetch data due to ECONNREFUSED while fetching

--

P.S. Not sure how wrapping each element in TRPCReactProvider affects memory and that stuff, so there is also a secondary option instead of having to throw a kazzilion TRPCReactProvider around your components. We did this pattern very often when it comes to shared state, contexts and providers - conditionally wrap the layout ONLY when is client, otherwise print children as-is.

// layout.tsx
    <html lang="en">
      <body>
        <main>
          <WrapOnlyClient
            wrapper={
              <TRPCReactProvider headers={headers()}>
                {children}
              </TRPCReactProvider>
            }
          >
            {children}
          </WrapOnlyClient>
        </main>
      </body>
    </html>

In this scenario, the page will SSR as-is, and will have no provider during SSR, but will actually have a provider in the client, allowing the client components to do their work. The major issue with this is that you then also must ensure that you don't mount (only) the offending client components during SSR, effectively making them client-only or mounted-only.

// some/page.tsx
<OnlyClient><ContainsTrpcCalls /></OnlyClient>

itarutomy97 · 2023-10-23T14:43:16Z

The following wrapper (WrapOnlyClient) does not work in my repo...
It seems that writing "force-dynamic" in layout.tsx deletes the error but in docker composing the error occurs.

Finally, I commented out the "hello" on app/page.tsx to delete the TRPCClientError...

// layout.tsx

<WrapOnlyClient
wrapper={

{children}

}
>
{children}

jonbergan · 2023-10-28T03:32:58Z

Experienced this issue today also when trying to build a new app with the latest T3 + App Router. 'force-dynamic' seemed to resolve the issue for me but certainly doesn't feel ideal. Keen to see the proper solution for this come through.

TCGAUD · 2023-10-28T18:12:20Z

Same issue here

juliusmarminge · 2023-10-29T19:40:35Z

Idk what @KATT thinks but i'd say this issue should be tracked in trpc as it's something we should look into from there on how to properly recommend using trpc/react-query and forwarding headers correctly?

ImBIOS · 2023-10-30T01:53:41Z

I only found these in the example bundled with t3, I never found it in any of my other projects.

I experimented by splitting all await into its independent components and then wrapping it with Suspense, the error went into the abyss in no time.

I suspect, it's Next.js trying to make all RSC static by default and only parts of its page are interactable which is dynamic. Whenever Next.js detects headers() or cookies() passed to the component, it normally catches it and makes the page dynamic, this error means, the error isn't watched properly for some reason.

simonri · 2023-10-30T09:12:09Z

I only found these in the example bundled with t3, I never found it in any of my other projects.

I experimented by splitting all await into its independent components and then wrapping it with Suspense, the error went into the abyss in no time.

I suspect, it's Next.js trying to make all RSC static by default and only parts of its page are interactable which is dynamic. Whenever Next.js detects headers() or cookies() passed to the component, it normally catches it and makes the page dynamic, this error means, the error isn't watched properly for some reason.

Wrapping the components in Suspense worked as a temporary solution for me as well.

benfavre · 2023-10-31T15:01:04Z

Switching from node 18 to 20 fixes this for me

jonbergan · 2023-10-31T20:44:46Z

That seems random since it doesn’t appear to be a node issue rather Next throwing a valid error..?

simonri · 2023-10-31T21:25:46Z

Switching from node 18 to 20 fixes this for me

Doesn't work for me

LudoLogical · 2023-11-06T03:44:00Z

+1 on this bug report, I'm running node v20.9.0
The issue is also present when deploying to Vercel

liuhe2020 · 2023-11-06T22:01:40Z

Same issue for me, and the funny thing is it doesn't happen to all pages. Some pages are completely fine and the setup is exactly the same, just calling for different data from the db. The website still deploys on Vercel and works as expect. This is the only time I see red in deploy log and it still manages to complete the build.

henokyehulu · 2023-11-07T18:42:50Z

Encounterd this issue today. Any solutions devs?

danieljpgo · 2023-11-08T01:45:49Z

This also happens on my side, it is impossible to generate static pages, it is limiting everything to SSR.

Andrii-Antoniuk · 2023-11-15T20:19:26Z

Same bug today for me
"initVersion": "7.23.2"

luthfimasruri · 2023-11-19T07:41:12Z

Today, I encountered this issue. Any updates on the fix?

Lucasvo1 · 2023-11-21T09:13:35Z

Having the same issue.

keelangibb · 2023-11-27T21:02:45Z

So, this is not causing a build issue anymore, but it is forcing all routes to become force-dynamic because of the use of headers and cookies I think. Even without using trpc on a barebones page.tsx. Anyone know of a workaround? "initVersion": "7.24.0"

LudoLogical · 2023-11-29T01:31:32Z

@keelangibb might be worth opening a new issue over and referencing this one in that one? Technically, this issue is resolved and should be closed, but obviously the behavior you're experiencing is problematic.

rydonahue1 · 2024-01-10T05:25:09Z

e? Technically, this issue is resolved and should be closed, but obviously the behavior you're experiencing is problematic.

Just did a pull of the repo today and was still getting the bug mentioned by OP, in just the base T3 app. I have been reading a ton of these threads and managed to find a few work arounds, but they all seem like a rather quick fix Band-Aid than an actual solution.

Is there any recommendation by the T3 team on how to bypass this error or is it safe to ignore because the app still technically builds?

Lukem121 · 2024-01-27T20:10:18Z

Also getting Dynamic server usage: Page couldn't be rendered statically because it used headers.

bored-yuns · 2024-03-01T04:13:18Z

So how exactly do you fix this?

andrewmartin · 2024-03-14T05:38:35Z

Curious if this is something we can fix, do we need headers() in the TRPC context?

gorkamolero · 2024-03-19T15:57:59Z

This seems to be a solution:

https://github.com/orgs/vercel/discussions/4696#discussioncomment-7494345

import { api } from '@/trpc/server';
import { unstable_noStore as noStore } from 'next/cache';

async function getIdeas() {
  noStore();
  const ideas = await api.ideas.getAll.query();
  return ideas;
}

* feat: begin creating Role Review Cards * feat: assembled Role Page Made role review cards update based on db, put together components for roles page, made search bar slightly more responsive, updated header logo sizing, edited logo font per design * feat: create header layout component to standardize header placement * fix: removed async from exports (not needed) * fix: made search filter (whole bar) more responsive" * fix: edit roles/page to prevent tRPC error.t3-oss/create-t3-app#1599 * docs: add TODO and FIXME tags * refactor: implemented changes suggested in PR. Started to work on style changes for header

player0x3 added the 🐞❔ unconfirmed bug label Oct 16, 2023

player0x3 changed the title ~~bug: 7.22.0 next build error：TRPCClientError: Dynamic server usage~~ bug: 7.22.0 next build error TRPCClientError: Dynamic server usage Oct 16, 2023

dBianchii mentioned this issue Oct 17, 2023

bug: TRPCClientError: Dynamic server usage: Page couldn't be rendered statically because it used headers #1604

Closed

c-ehrlich added 🐞 confirmed bug Something isn't working and removed 🐞❔ unconfirmed bug labels Oct 18, 2023

juliusmarminge mentioned this issue Nov 10, 2023

fix: lazy load cookies #1654

Closed

3 tasks

juliusmarminge mentioned this issue Nov 19, 2023

feat: skip http for trpc rsc calls #1670

Merged

juliusmarminge closed this as completed in #1670 Nov 21, 2023

josesei mentioned this issue Dec 8, 2023

bug: Version 7.24.2 not building with app router and trpc #1689

Closed

gillwong mentioned this issue Mar 21, 2024

Migrate to tRPC v11 and Next 14.1.4 GTD-IT-XXIV/gtd-xxvi-website#124

Merged

kira-0521 mentioned this issue Mar 21, 2024

Dynamic server usage kira-0521/todo-app-ai#55

Closed

banushi-a added a commit to sandboxnu/cooper that referenced this issue Mar 25, 2024

fix: edit roles/page to prevent tRPC error.t3-oss/create-t3-app#1599

29065e9

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

bug: 7.22.0 next build error TRPCClientError: Dynamic server usage #1599

bug: 7.22.0 next build error TRPCClientError: Dynamic server usage #1599

player0x3 commented Oct 16, 2023 •

edited

Loading

beaumccartney commented Oct 16, 2023

beaumccartney commented Oct 16, 2023

player0x3 commented Oct 17, 2023

dBianchii commented Oct 17, 2023

c-ehrlich commented Oct 18, 2023

dBianchii commented Oct 18, 2023

markomitranic commented Oct 19, 2023 •

edited

Loading

itarutomy97 commented Oct 23, 2023 •

edited

Loading

jonbergan commented Oct 28, 2023 •

edited

Loading

TCGAUD commented Oct 28, 2023

juliusmarminge commented Oct 29, 2023 •

edited

Loading

ImBIOS commented Oct 30, 2023

simonri commented Oct 30, 2023

benfavre commented Oct 31, 2023

jonbergan commented Oct 31, 2023

simonri commented Oct 31, 2023

LudoLogical commented Nov 6, 2023

liuhe2020 commented Nov 6, 2023 •

edited

Loading

henokyehulu commented Nov 7, 2023

danieljpgo commented Nov 8, 2023 •

edited

Loading

Andrii-Antoniuk commented Nov 15, 2023

luthfimasruri commented Nov 19, 2023

Lucasvo1 commented Nov 21, 2023

keelangibb commented Nov 27, 2023

LudoLogical commented Nov 29, 2023

rydonahue1 commented Jan 10, 2024

Lukem121 commented Jan 27, 2024

bored-yuns commented Mar 1, 2024

andrewmartin commented Mar 14, 2024

gorkamolero commented Mar 19, 2024

bug: 7.22.0 next build error TRPCClientError: Dynamic server usage #1599

bug: 7.22.0 next build error TRPCClientError: Dynamic server usage #1599

Comments

player0x3 commented Oct 16, 2023 • edited Loading

Provide environment information

Describe the bug

Reproduction repo

To reproduce

Additional information

beaumccartney commented Oct 16, 2023

beaumccartney commented Oct 16, 2023

player0x3 commented Oct 17, 2023

dBianchii commented Oct 17, 2023

c-ehrlich commented Oct 18, 2023

dBianchii commented Oct 18, 2023

markomitranic commented Oct 19, 2023 • edited Loading

itarutomy97 commented Oct 23, 2023 • edited Loading

jonbergan commented Oct 28, 2023 • edited Loading

TCGAUD commented Oct 28, 2023

juliusmarminge commented Oct 29, 2023 • edited Loading

ImBIOS commented Oct 30, 2023

simonri commented Oct 30, 2023

benfavre commented Oct 31, 2023

jonbergan commented Oct 31, 2023

simonri commented Oct 31, 2023

LudoLogical commented Nov 6, 2023

liuhe2020 commented Nov 6, 2023 • edited Loading

henokyehulu commented Nov 7, 2023

danieljpgo commented Nov 8, 2023 • edited Loading

Andrii-Antoniuk commented Nov 15, 2023

luthfimasruri commented Nov 19, 2023

Lucasvo1 commented Nov 21, 2023

keelangibb commented Nov 27, 2023

LudoLogical commented Nov 29, 2023

rydonahue1 commented Jan 10, 2024

Lukem121 commented Jan 27, 2024

bored-yuns commented Mar 1, 2024

andrewmartin commented Mar 14, 2024

gorkamolero commented Mar 19, 2024

player0x3 commented Oct 16, 2023 •

edited

Loading

markomitranic commented Oct 19, 2023 •

edited

Loading

itarutomy97 commented Oct 23, 2023 •

edited

Loading

jonbergan commented Oct 28, 2023 •

edited

Loading

juliusmarminge commented Oct 29, 2023 •

edited

Loading

liuhe2020 commented Nov 6, 2023 •

edited

Loading

danieljpgo commented Nov 8, 2023 •

edited

Loading