Skip to content

Hydration issue with extensions in React Router v7 Framework Mode #15313

Description

@nkaewam

Reproduction

Requestly (or any equivalent extensions) overrides HTML DOM directly under <html> tag, as a sibling of <body>.

RR Framework Mode expects to take over the entire DOM, and Requestly injects <rq-implicit-test-rule-widget> causing Hydration Mismatch.

Image

Couldn't repro in stackblitz as extension HTML injection does not work in stackblitz environment

System Info

System:
    OS: macOS 26.5.1
    CPU: (14) arm64 Apple M4 Max
    Memory: 791.11 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 24.16.0 - /Users/nonkaewampor/.nvm/versions/node/v24.16.0/bin/node
    npm: 11.13.0 - /Users/nonkaewampor/.nvm/versions/node/v24.16.0/bin/npm
    pnpm: 10.34.1 - /Users/nonkaewampor/.nvm/versions/node/v24.16.0/bin/pnpm
    bun: 1.3.14 - /Users/nonkaewampor/.bun/bin/bun
  Browsers:
    Chrome: 149.0.7827.201
    Edge: 150.0.4078.65
    Safari: 26.5
  npmPackages:
    @react-router/dev: ^7.17.0 => 7.17.0 
    @react-router/node: ^7.17.0 => 7.17.0 
    react-router: ^7.14.0 => 7.17.0 
    vite: ^8.0.0 => 8.0.16

Used Package Manager

pnpm

Expected Behavior

Should be able to handle requestly extension HTML injection just fine, no hydration issue

Actual Behavior

Hydration Mismatch, error, could not render any subsequent CSS from Chakra UI

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions