suppressHydrationWarning doesn't work as intended af... | payloadcms/payload

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

suppressHydrationWarning doesn't work as intended after next upgrade to 16.2.*

Description

Describe the Bug

Link to the code that reproduces this issue

Reproduction Steps

Which area(s) are affected?

Environment Info

Contributor guide

First steps

Assessment

suppressHydrationWarning doesn't work as intended after next upgrade to 16.2.*

Description

Describe the Bug

Link to the code that reproduces this issue

Reproduction Steps

Which area(s) are affected?

Environment Info

Contributor guide

First steps

Assessment

Get new issues in your inbox