Rendering Suspense in server component throws React error 419 in production builds #51581

EthanStandel · 2023-06-20T18:12:02Z

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

λ npx next info

    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 22.5.0: Mon Apr 24 20:51:50 PDT 2023; root:xnu-8796.121.2~5/RELEASE_X86_64
    Binaries:
      Node: 19.6.0
      npm: 9.4.0
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.4.7-canary.1
      eslint-config-next: 13.4.6
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.3

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue or a replay of the bug

https://codesandbox.io/p/sandbox/fervent-snowflake-9fzx7p?file=%2Fapp%2Flayout.tsx%3A9%2C19

To Reproduce

Implement the NavigationEvents component exactly as it's described in the docs into a new Next app. It causes errors unless I unwrap the Suspense boundary.

Describe the Bug

I'm using the NavigationEvents component straight out of the docs.

When I wrap the component in a Suspense boundary, as is recommended, it throws a hydration error. In prod builds, it seems to work fine, but it throws React error #419 silently in the console. If I take away the Suspense boundary, then everything seems to work fine and I get no errors. However, the docs seem to imply that the parenting server component is going to rerender on search param updates if I useSearchParams in a static render without the boundary. I would want the NavigationEvents to be in the layout, and this would mean that all search param changes trigger full rerenders.

Expected Behavior

Suspense boundaries should not throw hydrations errors in dev or silent React errors in prod.

Which browser are you using? (if relevant)

Chrome 114.0.5735.133 (Official Build) (x86_64)

How are you deploying your application? (if relevant)

Local & Vercel

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

EvGreen · 2023-09-26T07:11:10Z

got same issue, no problems on dev, prod builds fine but gives the 419 console log. next 13.5.1, component with useSearchParams wrapped in Suspense

bai · 2023-10-26T12:29:42Z

Confirming the issue is there in Next 13.5.6, using canonical @PostHog App Dir example from their docs. For some reason it doesn't happen locally with pnpm dev or pnpm build.

Thanaen · 2023-11-19T20:40:34Z

Note that this error still occurs on Next.js 14.0.3

(PS: I have opened an issue at Posthog, but according to what you say, it is rather a problem with next.js PostHog/posthog-js#872)

Arsenalist · 2023-12-18T22:31:35Z

Still busted in 14.0.4.

erickreutz · 2024-03-31T16:47:17Z

I have the same problem trying to use Segments analytics-next and even Vercels own example doesn't wrap their use of useSearchParams in a Suspense boundary. https://github.com/vercel/next.js/blob/canary/examples/with-segment-analytics/app/layout.tsx#L18

ashrth · 2024-04-03T18:12:07Z

If this is how your Posthog file looks

export function PHProvider({ children }) {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    if (pathname) {
      let url = window.origin + pathname;
      if (searchParams.toString()) {
        url = url + "?" + searchParams.toString();
      }
      posthog.capture("$pageview", { $current_url: url });
    }
  }, [pathname, searchParams]);

  return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
}

just wrap PostHogProvide with Suspense something like this, I am using Nextjs (App router)

 <Suspense>
        <PHProvider>
          <body>
            <head>
              <link rel="icon" href="/img/favicon.ico" sizes="any" />
            </head>

            {children}
            <Toaster position="top-center" closeButton />
          </body>
        </PHProvider>
      </Suspense>
      ```

LTe · 2025-01-30T11:25:24Z

I have the same problem with Next.js v15.1.6 in production mode (no errors in development mode).

Operating System:
  Platform: linux
  Arch: x64
  Version: #44-Ubuntu SMP PREEMPT_DYNAMIC Fri Jun  7 15:10:09 UTC 2024
  Available memory (MB): 63429
  Available CPU cores: 32
Binaries:
  Node: 18.18.0
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.7.5
Relevant Packages:
  next: 15.1.6 // Latest available version is detected (15.1.6).
  eslint-config-next: 15.1.6
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.4.3
Next.js Config:
  output: N/A

LTe · 2025-01-31T12:01:19Z

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Rendering Suspense in server component throws React error 419 in production builds #51581

Rendering Suspense in server component throws React error 419 in production builds #51581

EthanStandel commented Jun 20, 2023

EvGreen commented Sep 26, 2023

bai commented Oct 26, 2023

Thanaen commented Nov 19, 2023 •

edited

Loading

Arsenalist commented Dec 18, 2023

erickreutz commented Mar 31, 2024

ashrth commented Apr 3, 2024

LTe commented Jan 30, 2025 •

edited

Loading

LTe commented Jan 31, 2025 •

edited

Loading

Rendering Suspense in server component throws React error 419 in production builds #51581

Rendering Suspense in server component throws React error 419 in production builds #51581

Comments

EthanStandel commented Jun 20, 2023

Verify canary release

Provide environment information

Which area(s) of Next.js are affected? (leave empty if unsure)

Link to the code that reproduces this issue or a replay of the bug

To Reproduce

Describe the Bug

Expected Behavior

Which browser are you using? (if relevant)

How are you deploying your application? (if relevant)

EvGreen commented Sep 26, 2023

bai commented Oct 26, 2023

Thanaen commented Nov 19, 2023 • edited Loading

Arsenalist commented Dec 18, 2023

erickreutz commented Mar 31, 2024

ashrth commented Apr 3, 2024

LTe commented Jan 30, 2025 • edited Loading

LTe commented Jan 31, 2025 • edited Loading

Thanaen commented Nov 19, 2023 •

edited

Loading

LTe commented Jan 30, 2025 •

edited

Loading

LTe commented Jan 31, 2025 •

edited

Loading