OpenCut-app / OpenCut-app/OpenCut
[BUG] Hydration mismatch warning in dev caused by browser extensions (e.g. Grammarly)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 89.8k
- Forks
- 8.9k
- PR merge metrics
- No merged PRs in 30d
Description
Platform
Windows 11
Browser
Chrome
Current Behavior
I received this error after doing bun run dev
[Client] A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. 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.
%s%s https://react.dev/link/hydration-mismatch
...
<Await promise={Promise}>
<AwaitInner promise={Promise}>
<RouterProvider router={{...}}>
<RouterContextProvider router={{...}}>
<Matches>
<SafeFragment fallback={null}>
<Transitioner>
<MatchesInner>
<CatchBoundary getResetKey={function getResetKey} errorComponent={function ErrorComponent} ...>
<CatchBoundaryImpl getResetKey={function getResetKey} onCatch={function}>
<MatchImpl matchId="__root__/">
<MatchView router={{...}} matchId="__root__/" resetKey={0} matchState={{routeId:"_...", ...}}>
<RootDocument>
<html lang="en" data-tsd-source="/src/route...">
<head>
<body
data-tsd-source="/src/routes/__root.tsx:56:7"
- data-new-gr-c-s-check-loaded="14.1302.0"
- data-gr-ext-installed=""
>``
### Expected Behavior
No hydration mismatch warning (or documented as a known dev-only quirk).
### Recurrence Probability
Always
### Steps To Reproduce
1. Clone repo and run `bun install && bun run dev`
2. Open http://localhost:5173 with Grammarly (or similar) enabled
3. Open browser console
### Anything else?
_No response_Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the warning with bun run dev in Chrome with Grammarly enabled, then inspect src/routes/__root.tsx at the reported __root.tsx:56:7 location. Compare behavior with the extension disabled and determine whether the project can avoid the warning or should document it as a dev-only browser-extension quirk. Done means the chosen outcome is verified against the reproduction steps.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100