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

EthanStandel commented 1 year ago

Verify canary release

[X] 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

EvGreen commented 1 year ago

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 commented 12 months ago

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 commented 11 months ago

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 https://github.com/PostHog/posthog-js/issues/872)

Arsenalist commented 10 months ago

Still busted in 14.0.4.

erickreutz commented 6 months ago

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 commented 6 months ago

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>

vercel / next.js