Describe the Bug
The Chrome browser Grammarly extension, among many others, modifies the HTML code. It is an absolutely normal practice. With the recent upgrade of next to 16.2.3, the suppressHydrationWarning in the Payload config no longer works as intended. It used to suppress the hydration warnings on next@16.1.7, though.
Now, despite the suppressHydrationWarning={true} attribute being present on the root <HTML /> tag, it still spits out the hydration error:
GET /admin 200 in 7.0s (next.js: 2.8s, application-code: 4.2s)
[browser] 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.
https://react.dev/link/hydration-mismatch
...
<RenderFromTemplateContext>
<ScrollAndMaybeFocusHandler cacheNode={{rsc:{...}, ...}}>
<InnerScrollAndFocusHandlerOld focusAndScrollRef={{scrollRef:null, ...}} cacheNode={{rsc:{...}, ...}}>
<ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
<LoadingBoundary name="/" loading={null}>
<HTTPAccessFallbackBoundary notFound={{...}} forbidden={undefined} unauthorized={undefined}>
<HTTPAccessFallbackErrorBoundary pathname="/admin" notFound={{...}} forbidden={undefined} ...>
<RedirectBoundary>
<RedirectErrorBoundary router={{...}}>
<InnerLayoutRouter url="/admin" tree={[...]} params={{}} cacheNode={{rsc:{...}, ...}} ...>
<SegmentViewNode type="layout" pagePath="(payload)/...">
<SegmentTrieNode>
<link>
<script>
<script>
<script>
<script>
<script>
<script>
<script>
<script>
<script>
<script>
<script>
<script>
<script>
<Layout>
<RootLayout>
<RootLayoutContent>
<html data-theme="dark" dir="LTR" lang="en" suppressHydrationWarning={true}>
<head>
<body
- data-new-gr-c-s-check-loaded="14.1283.0"
- data-gr-ext-installed=""
>
...
...
PS. No, disabling the extension is not an option — it is a primary writing tool, after all.
PS. In other frameworks, the hydration is not as fussy as it is in next/react...
Link to the code that reproduces this issue
https://github.com/immotus/bug-hydration-grammarly
Reproduction Steps
Prerequisites:
- Install Chrome browser
- Install Grammarly extension (https://chromewebstore.google.com/detail/grammarly-ai-writing-assi/kbfnbcaeplbcioakkpcpgfkobkghlhen)
Reproduction steps:
- Clone the repo — the repo is literally just a BLANK project with
suppressHydrationWarning: true set in the payload.config.ts
pnpm dev- Open a browser (with a Grammarly extension enabled) and go to
http://localhost:3000/admin or http://localhost:3000/
- Observe hydration errors in the console despite the
suppressHydrationWarning={true} attribute present on the root <HTML /> tag.
Which area(s) are affected?
area: core
Environment Info
Binaries:
Node: 24.8.0
npm: N/A
Yarn: N/A
pnpm: 10.17.0
Relevant Packages:
payload: 3.82.1
next: 16.2.3
@payloadcms/db-mongodb: 3.82.1
@payloadcms/graphql: 3.82.1
@payloadcms/next/utilities: 3.82.1
@payloadcms/richtext-lexical: 3.82.1
@payloadcms/translations: 3.82.1
@payloadcms/ui/shared: 3.82.1
react: 19.2.4
react-dom: 19.2.4
Operating System:
Platform: win32
Arch: x64
Version: Windows 11 Pro
Available memory (MB): 32631
Available CPU cores: 16
Describe the Bug
The Chrome browser Grammarly extension, among many others, modifies the HTML code. It is an absolutely normal practice. With the recent upgrade of
nextto 16.2.3, thesuppressHydrationWarningin the Payload config no longer works as intended. It used to suppress the hydration warnings onnext@16.1.7, though.Now, despite the
suppressHydrationWarning={true}attribute being present on the root<HTML />tag, it still spits out the hydration error:PS. No, disabling the extension is not an option — it is a primary writing tool, after all.
PS. In other frameworks, the hydration is not as fussy as it is in next/react...
Link to the code that reproduces this issue
https://github.com/immotus/bug-hydration-grammarly
Reproduction Steps
Prerequisites:
Reproduction steps:
suppressHydrationWarning: trueset in thepayload.config.tspnpm devhttp://localhost:3000/adminorhttp://localhost:3000/suppressHydrationWarning={true}attribute present on the root<HTML />tag.Which area(s) are affected?
area: core
Environment Info