Skip to content

allowedDevOrigins causes a hydration mismatch (display:contents metadata boundary) on every full page load #98604

Description

@gpalavecino-gotoxy

Link to the code that reproduces this issue

https://github.com/gpalavecino-gotoxy/nextjs-allowed-dev-origins-hydration-repro

To Reproduce

  1. npx create-next-app@latest (App Router, TypeScript, default options)
  2. Add allowedDevOrigins: ["127.0.0.1"] to next.config.ts — nothing else changed from the scaffold
  3. npm run dev
  4. Open http://127.0.0.1:3000/ (the exact origin listed in allowedDevOrigins)
  5. Open the browser console

Current vs. Expected behavior

Expected: clean hydration, no console errors.

Actual: React throws a hydration-mismatch error on (almost) every fresh full-page load:

Error: Hydration failed because the server rendered HTML didn't match the client.
...
<MetadataWrapper>
  <div
+   hidden={true}
-   hidden={null}
-   style={{display:"contents"}}
  >
    <__next_metadata_boundary__>
+     <Suspense name="Next.Metadata">

Removing allowedDevOrigins from next.config.ts (with everything else identical) makes the mismatch disappear consistently across many reloads. Re-adding it brings it back. This is the only variable I changed — see the linked repo's README for the isolation steps (also ruled out custom fonts and Tailwind config in a larger app before narrowing it down to this one option).

In a larger real-world app on the same Next.js version, the SSR-to-CSR remount this mismatch forces was observed to occasionally swallow the first click on an interactive element (e.g. a form's submit button silently doing nothing) because the DOM subtree gets torn down and rebuilt while the click event is in flight — happy to add more detail on that if useful, but the attached repro isolates the hydration error itself.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
Binaries:
  Node: 24.4.0
  npm: 11.4.2
Relevant Packages:
  next: 16.3.5 (also reproduced on 16.2.6)
  react: 19.2.8
  react-dom: 19.2.8
  typescript: 5.9.3
Next.js Config:
  output: N/A

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

Navigation, Runtime

Which stage(s) are affected?

next dev (local)

Additional context

allowedDevOrigins is the documented workaround for a Windows-specific dev annoyance where localhost intermittently resolves to ::1 while the Turbopack dev server only listens on IPv4, making http://localhost:3000 fail to load and 127.0.0.1 the only reachable origin. Turning on the workaround to fix that connectivity problem introduces this hydration mismatch as a side effect.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    RuntimeRelated to Node.js or Edge Runtime with Next.js.

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions