Returning a string from a page component causes hydration mismatch error

[tom-sherman]

Link to the code that reproduces this issue

https://github.com/tom-sherman/next-text-page-hydration-mismatch

To Reproduce

1. Return a string from a page component
2. Request the route

Current vs. Expected behavior

Current: Hydration mismatch error in dev and prod builds.

Uncaught Error: Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

https://react.dev/link/hydration-mismatch

  ...
    <OuterLayoutRouter parallelRouterKey="children" segmentPath={[...]} template={<RenderFromTemplateContext>} ...>
      <RenderFromTemplateContext>
        <ScrollAndFocusHandler segmentPath={[...]}>
          <InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
            <ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
              <LoadingBoundary hasLoading={false} loading={undefined} loadingStyles={undefined} ...>
                <NotFoundBoundary notFound={[...]} notFoundStyles={[...]}>
                  <NotFoundErrorBoundary pathname="/" notFound={[...]} notFoundStyles={[...]} asNotFound={undefined} ...>
                    <RedirectBoundary>
                      <RedirectErrorBoundary router={{...}}>
                        <InnerLayoutRouter parallelRouterKey="children" url="/" tree={[...]} childNodes={Map} ...>
+                         hi
-                         <text>

Expected: no error

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:10:42 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T6000
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Node: 20.9.0
  npm: 10.5.0
  Yarn: 1.22.19
  pnpm: 9.1.0
Relevant Packages:
  next: 14.3.0-canary.72 // Latest available version is detected (14.3.0-canary.72).
  eslint-config-next: N/A
  react: 19.0.0-beta-04b058868c-20240508
  react-dom: 19.0.0-beta-04b058868c-20240508
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Runtime

Which stage(s) are affected? (Select all that apply)

next dev (local), next start (local), Vercel (Deployed), Other (Deployed)

Additional context

Not sure this is a huge issue as returning a string from a route shouldn't be used that much.

[icyJoseph]

I can't reproduce this. Does it happen in incognito mode as well? or maybe I started your project wrongly?

https://stackblitz.com/github/tom-sherman/next-text-page-hydration-mismatch?file=README.md

[tom-sherman]

Have you tried locally? Stackblitz isn't 100% accurate for streaming rendering.

[icyJoseph]

Did that just now, and still works fine. Tried with canary on React 19 as well, no issue.

Could it be a Node.js version thing?

[tom-sherman]

I narrowed it down to a specific chrome extension: https://chromewebstore.google.com/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh

I may close this then, but before doing so I'm going to investigate a bit more exactly what that extension is doing to cause the mismatch.

[icyJoseph]

Probably edits the HTML with a pre tag or something like that

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.