nextjs - ✅(Solved) Fix Hydration failure with `useId()` and AG Grid Enterprise [14 pull requests, 29 comments, 13 participants]

rwalisa · 2025-09-20T23:00:18Z

[nextjs] PR 14456: feat: next.js 16 support - Repository: payloadcms/payload - Author: AlessioGr - State: closed | merged: True - Link: https://github.com/payl… # PR #14456: feat: next.js 16 support - Repository: payloadcms/payload - Author: AlessioGr - State: closed | merged: True - Link: https://github.com/payloadcms/payload/pull/14456 ## Description (problem / solution / changelog) This PR: - updates this monorepo to use Next.js 16. Running our test suites against Next.js 16 is required to guarantee support. - updates all peerDependencies to support the latest Next.js canary. Individual Next.js 16–related fixes were made in separate, smaller PRs (listed below). As a result, the majority of the changes in this PR are focused on getting the test suite to pass. Templates will be updated in a separate PR once Next.js 16.2.0 is released. ## Current Status / Known Issues You can use Next.js 16 with Payload, as long as you're using the latest Payload version and Next.js >16.1.1-canary.35 or, if released, 16.2.0. ## List of Next.js 16-related PRs that were extracted from this branch - https://github.com/payloadcms/payload/pull/15270 - https://github.com/payloadcms/payload/pull/14845 - https://github.com/payloadcms/payload/pull/14502 - https://github.com/payloadcms/payload/pull/14558 - https://github.com/payloadcms/payload/pull/14475 - https://github.com/payloadcms/payload/pull/14474 - https://github.com/payloadcms/payload/pull/14473 - https://github.com/payloadcms/payload/pull/14463 - https://github.com/payloadcms/payload/pull/14462 ## List of Next.js / React issues that were fixed - no longer blockers - [x] ~~Turbopack HMR stability - [vercel/next.js#85883](https://github.com/vercel/next.js/issues/85883) Currently breaks when a live-preview–enabled page is open ([related Payload issue](https://github.com/payloadcms/payload/issues/14419)). The Next.js team is actively working on a fix: [PR #86239](https://github.com/vercel/next.js/pull/86239).~~ Fixed in Next.js canary - [x] ~~Turbopack Build support: [PR #86375](https://github.com/vercel/next.js/pull/86375).~~ Fixed in Next.js canary - [x] ~~We need to wait for [vercel/next.js#84029](https://github.com/vercel/next.js/issues/84029) to be resolved. We initially expected these hydration errors to be suppressible, but that turned out not to be the case. As a result, this issue is now the final blocker for Next.js 16 support. Most of the CI e2e test failures in this PR are the result of this issue.~~ ## Changed files - `docs/performance/overview.mdx` (modified, +2/-4) - `next-env.d.ts` (modified, +1/-0) - `next.config.mjs` (modified, +6/-4) - `package.json` (modified, +7/-6) - `packages/admin-bar/package.json` (modified, +2/-2) - `packages/db-d1-sqlite/bundle.js` (modified, +2/-0) - `packages/db-postgres/bundle.js` (modified, +2/-0) - `packages/db-postgres/package.json` (modified, +1/-1) - `packages/db-sqlite/bundle.js` (modified, +2/-0) - `packages/db-vercel-postgres/package.json` (modified, +1/-1) - `packages/live-preview-react/package.json` (modified, +2/-2) - `packages/next/bundle.js` (modified, +2/-0) - `packages/next/package.json` (modified, +5/-5) - `packages/next/src/withPayload/withPayload.js` (modified, +36/-0) - `packages/payload/bundle.js` (modified, +4/-0) - `packages/payload/package.json` (modified, +1/-1) - `packages/payload/src/index.ts` (modified, +9/-0) - `packages/plugin-cloud-storage/package.json` (modified, +2/-2) - `packages/plugin-ecommerce/package.json` (modified, +2/-2) - `packages/plugin-form-builder/package.json` (modified, +2/-2) - `packages/plugin-search/package.json` (modified, +2/-2) - `packages/plugin-sentry/package.json` (modified, +2/-2) - `packages/plugin-seo/package.json` (modified, +2/-2) - `packages/plugin-stripe/package.json` (modified, +2/-2) - `packages/richtext-lexical/bundle.js` (modified, +2/-1) - `packages/richtext-lexical/package.json` (modified, +3/-3) - `packages/richtext-lexical/src/exports/server/ast/mdx.ts` (modified, +0/-1) - `packages/richtext-lexical/src/packages/@lexical/markdown/MarkdownImport.ts` (modified, +0/-1) - `packages/richtext-slate/package.json` (modified, +2/-2) - `packages/storage-s3/src/generateSignedURL.ts` (modified, +1/-2) - `packages/storage-s3/src/staticHandler.ts` (modified, +0/-1) - `packages/translations/package.json` (modified, +2/-2) - `packages/ui/bundle.js` (modified, +4/-0) - `packages/ui/package.json` (modified, +4/-4) - `packages/ui/src/elements/DraggableSortable/index.tsx` (modified, +10/-4) - `packages/ui/src/fields/Array/ArrayRow.tsx` (modified, +4/-1) - `packages/ui/src/forms/Form/index.tsx` (modified, +6/-0) - `packages/ui/src/providers/LivePreview/index.tsx` (modified, +9/-2) - `packages/ui/src/providers/Root/index.tsx` (modified, +1/-0) - `packages/ui/src/views/Edit/index.tsx` (modified, +20/-0) - `pnpm-lock.yaml` (modified, +6807/-7931) - `test/access-control/e2e.spec.ts` (modified, +8/-9) - `test/access-control/payload-types.ts` (modified, +11/-11) - `test/access-contro

nextjs2025-09-20 23:00:18

ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

GitHub issue URL

Helpful · Quick feedback

GitHub stats

vercel/next.js#84029•Fetched 2026-04-08 02:20:48

View on GitHub

Comments

Participants

Timeline

126

Reactions

Author

Participants

Timeline (top)

subscribed ×71commented ×29cross-referenced ×11mentioned ×6

Error Message

In case the error doesn't appear, refresh it
Refresh the page to see that the error is gone

Root Cause

Hydration fails, because useId() returns _R_clrlb_ on the server and _R_4lrlb_ on the client.

Fix Action

Fix / Workaround

The issue happens starting from Next.js v15.4.2-canary.20. v15.4.2-canary.19 works as expected. All patch versions in 15.5.x are affected.

PR fix notes

PR #14456: feat: next.js 16 support

Repository: payloadcms/payload
Author: AlessioGr
State: closed | merged: True
Link: https://github.com/payloadcms/payload/pull/14456

Description (problem / solution / changelog)

This PR:

updates this monorepo to use Next.js 16. Running our test suites against Next.js 16 is required to guarantee support.
updates all peerDependencies to support the latest Next.js canary.

Individual Next.js 16–related fixes were made in separate, smaller PRs (listed below). As a result, the majority of the changes in this PR are focused on getting the test suite to pass.

Templates will be updated in a separate PR once Next.js 16.2.0 is released.

Current Status / Known Issues

You can use Next.js 16 with Payload, as long as you're using the latest Payload version and Next.js >16.1.1-canary.35 or, if released, 16.2.0.

List of Next.js 16-related PRs that were extracted from this branch

List of Next.js / React issues that were fixed - no longer blockers

~~Turbopack HMR stability - vercel/next.js#85883 Currently breaks when a live-preview–enabled page is open (related Payload issue). The Next.js team is actively working on a fix: PR #86239.~~ Fixed in Next.js canary
~~Turbopack Build support: PR #86375.~~ Fixed in Next.js canary
We need to wait for vercel/next.js#84029 to be resolved. We initially expected these hydration errors to be suppressible, but that turned out not to be the case. As a result, this issue is now the final blocker for Next.js 16 support. Most of the CI e2e test failures in this PR are the result of this issue.

Changed files

docs/performance/overview.mdx (modified, +2/-4)
next-env.d.ts (modified, +1/-0)
next.config.mjs (modified, +6/-4)
package.json (modified, +7/-6)
packages/admin-bar/package.json (modified, +2/-2)
packages/db-d1-sqlite/bundle.js (modified, +2/-0)
packages/db-postgres/bundle.js (modified, +2/-0)
packages/db-postgres/package.json (modified, +1/-1)
packages/db-sqlite/bundle.js (modified, +2/-0)
packages/db-vercel-postgres/package.json (modified, +1/-1)
packages/live-preview-react/package.json (modified, +2/-2)
packages/next/bundle.js (modified, +2/-0)
packages/next/package.json (modified, +5/-5)
packages/next/src/withPayload/withPayload.js (modified, +36/-0)
packages/payload/bundle.js (modified, +4/-0)
packages/payload/package.json (modified, +1/-1)
packages/payload/src/index.ts (modified, +9/-0)
packages/plugin-cloud-storage/package.json (modified, +2/-2)
packages/plugin-ecommerce/package.json (modified, +2/-2)
packages/plugin-form-builder/package.json (modified, +2/-2)
packages/plugin-search/package.json (modified, +2/-2)
packages/plugin-sentry/package.json (modified, +2/-2)
packages/plugin-seo/package.json (modified, +2/-2)
packages/plugin-stripe/package.json (modified, +2/-2)
packages/richtext-lexical/bundle.js (modified, +2/-1)
packages/richtext-lexical/package.json (modified, +3/-3)
packages/richtext-lexical/src/exports/server/ast/mdx.ts (modified, +0/-1)
packages/richtext-lexical/src/packages/@lexical/markdown/MarkdownImport.ts (modified, +0/-1)
packages/richtext-slate/package.json (modified, +2/-2)
packages/storage-s3/src/generateSignedURL.ts (modified, +1/-2)
packages/storage-s3/src/staticHandler.ts (modified, +0/-1)
packages/translations/package.json (modified, +2/-2)
packages/ui/bundle.js (modified, +4/-0)
packages/ui/package.json (modified, +4/-4)
packages/ui/src/elements/DraggableSortable/index.tsx (modified, +10/-4)
packages/ui/src/fields/Array/ArrayRow.tsx (modified, +4/-1)
packages/ui/src/forms/Form/index.tsx (modified, +6/-0)
packages/ui/src/providers/LivePreview/index.tsx (modified, +9/-2)
packages/ui/src/providers/Root/index.tsx (modified, +1/-0)
packages/ui/src/views/Edit/index.tsx (modified, +20/-0)
pnpm-lock.yaml (modified, +6807/-7931)
test/access-control/e2e.spec.ts (modified, +8/-9)
test/access-control/payload-types.ts (modified, +11/-11)
test/access-control/shared.ts (modified, +1/-1)
test/admin/e2e/list-view/e2e.spec.ts (modified, +6/-0)
test/auth/e2e.spec.ts (modified, +1/-0)
test/bulk-edit/config.ts (modified, +5/-16)
test/bulk-edit/e2e.spec.ts (modified, +92/-28)
test/bulk-edit/seed.ts (added, +21/-0)
test/dev.ts (modified, +0/-1)
test/docker-compose.yml (modified, +1/-1)
test/field-error-states/e2e.spec.ts (modified, +3/-7)
test/fields-relationship/e2e.spec.ts (modified, +0/-1)
test/fields/collections/Blocks/e2e.spec.ts (modified, +1/-3)
test/fields/collections/Date/e2e.spec.ts (modified, +10/-6)
test/fields/collections/Indexed/e2e.spec.ts (modified, +0/-1)
test/fields/collections/JSON/e2e.spec.ts (modified, +11/-16)
test/fields/collections/Tabs/e2e.spec.ts (modified, +7/-9)
test/folders/e2e.spec.ts (modified, +3/-4)
test/form-state/e2e.spec.ts (modified, +104/-50)
test/group-by/e2e.spec.ts (modified, +30/-8)
test/helpers.ts (modified, +41/-0)
test/helpers/assertToastErrors.ts (modified, +3/-10)
test/helpers/e2e/copyPasteField.ts (modified, +3/-0)
test/helpers/e2e/groupBy/addGroupBy.ts (modified, +1/-0)
test/helpers/e2e/navigateToDoc.ts (modified, +5/-1)
test/helpers/e2e/sort/moveRow.ts (modified, +3/-0)
test/helpers/e2e/waitForAutoSaveToRunAndComplete.ts (modified, +3/-0)
test/helpers/folders/createFolderDoc.ts (modified, +2/-0)
test/helpers/sdk/types.ts (modified, +1/-0)
test/i18n/e2e.spec.ts (modified, +2/-0)
test/lexical/collections/Lexical/e2e/blocks/e2e.spec.ts (modified, +9/-6)
test/lexical/collections/Lexical/e2e/main/e2e.spec.ts (modified, +6/-0)
test/localization/config.ts (modified, +0/-12)
test/localization/e2e.spec.ts (modified, +19/-9)
test/locked-documents/e2e.spec.ts (modified, +42/-215)
test/next.config.mjs (modified, +1/-3)
test/package.json (modified, +6/-6)
test/plugin-import-export/e2e.spec.ts (modified, +0/-6)
test/plugin-multi-tenant/config.ts (modified, +6/-1)
test/plugin-multi-tenant/e2e.spec.ts (modified, +18/-10)
test/plugin-multi-tenant/seed/index.ts (modified, +2/-23)
test/uploads/e2e.spec.ts (modified, +0/-3)
test/versions/e2e.spec.ts (modified, +9/-1)

PR #35423: Fix lazy thenable suspension race

Repository: facebook/react
Author: leeguooooo
State: closed | merged: False
Link: https://github.com/facebook/react/pull/35423

Description (problem / solution / changelog)

Summary

Handle status-thenable transitions in lazy initializer, including pending→settled flips.
Keep async debug info (ioInfo) in sync with status-only thenables.
Add tests for fulfilled/rejected status thenables and pending→fulfilled flip.

Testing

NODE_ENV=development RELEASE_CHANNEL=experimental compactConsole=false node ./scripts/jest/jest.js --config ./scripts/jest/config.source.js --runTestsByPath packages/react-reconciler/src/tests/ReactLazy-test.internal.js --runInBand

Fixes #35399

Changed files

packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js (modified, +79/-2)
packages/react/src/ReactLazy.js (modified, +113/-0)

PR #3654: [menu][popover][combobox] Fix focus guard handling

Repository: mui/base-ui
Author: atomiks
State: closed | merged: True
Link: https://github.com/mui/base-ui/pull/3654

Description (problem / solution / changelog)

I have followed (at least) the PR section of the contributing guide.

Fixes a few issues with the focus guards:

Tabbing out of a Popover gets stuck on the focus guard in Safari (or moving virtual cursor out of a Popover on iOS)
Tabbing out of a Menu inside a Popover incorrectly restores focus to the popover container instead of the next tabbable
Tabbing out of a Combobox input whose popover is open should close the popup when focus lands on the Popover trigger (when it's the first tabbable element or the last one, when tabbing forward)

https://deploy-preview-3654--base-ui.netlify.app/experiments/popup-tabbing

Changed files

docs/src/app/(private)/experiments/popup-tabbing.tsx (added, +321/-0)
packages/react/src/combobox/popup/ComboboxPopup.tsx (modified, +2/-1)
packages/react/src/floating-ui-react/components/FloatingFocusManager.tsx (modified, +26/-11)
packages/react/src/floating-ui-react/components/FloatingPortal.tsx (modified, +1/-1)
packages/react/src/menu/trigger/MenuTrigger.tsx (modified, +5/-6)
packages/react/src/popover/root/PopoverRoot.test.tsx (modified, +141/-0)
packages/react/src/popover/trigger/PopoverTrigger.tsx (modified, +4/-5)

Code Example

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 25.0.0: Mon Aug 25 21:16:39 PDT 2025; root:xnu-12377.1.9~3/RELEASE_ARM64_T6031
  Available memory (MB): 36864
  Available CPU cores: 14
Binaries:
  Node: 24.8.0
  npm: 11.6.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.5.3 // Latest available version is detected (15.5.3).
  eslint-config-next: 15.5.3
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.9.2
Next.js Config:
  output: N/A

RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/rwalisa/nextjs-useid-hydration-bug-demo/

To Reproduce

Start the application in development, or build and run the server
Open the index page
In case the error doesn't appear, refresh it
Remove line 7 in Component.jsx
Refresh the page to see that the error is gone

Current vs. Expected behavior

Hydration fails, because useId() returns _R_clrlb_ on the server and _R_4lrlb_ on the client.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 25.0.0: Mon Aug 25 21:16:39 PDT 2025; root:xnu-12377.1.9~3/RELEASE_ARM64_T6031
  Available memory (MB): 36864
  Available CPU cores: 14
Binaries:
  Node: 24.8.0
  npm: 11.6.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.5.3 // Latest available version is detected (15.5.3).
  eslint-config-next: 15.5.3
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.9.2
Next.js Config:
  output: N/A

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

React

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

next dev (local), next build (local), next start (local)

Additional context

The issue happens starting from Next.js v15.4.2-canary.20. v15.4.2-canary.19 works as expected. All patch versions in 15.5.x are affected.

It only happens when AG Grid Enterprise is imported in a client component (not necessarily the one that calls useId()) and referenced in the code by accessing any of its exports. Since the imported package doesn't import React, I think it's an issue with Next.js module resolution.

Importing AG Grid Community doesn't trigger the issue.

extent analysis

TL;DR

The issue with useId() hydration failure in Next.js can be worked around by avoiding the import of AG Grid Enterprise in client components.

Guidance

Verify that the issue is resolved by removing the import of AG Grid Enterprise in client components, as demonstrated in the provided reproduction steps.
Investigate alternative methods for utilizing AG Grid Enterprise, such as dynamic imports or server-side rendering, to mitigate the issue.
Consider using AG Grid Community instead, as it does not trigger the hydration failure.
Review the Next.js module resolution configuration to ensure it is correctly set up, as the issue may be related to module resolution.

Example

No explicit code example is provided, but the reproduction steps in the issue body demonstrate how removing the import of AG Grid Enterprise resolves the issue.

Notes

The issue is specific to Next.js versions starting from v15.4.2-canary.20 and all patch versions in 15.5.x.
The issue only occurs when AG Grid Enterprise is imported in a client component, and not when using AG Grid Community.

Recommendation

Apply workaround: Avoid importing AG Grid Enterprise in client components, as this resolves the hydration failure issue.

Vote matrix · Quick signals

Works

Did the solution work? Tap to confirm.

Easy Fix

Was it a quick fix?

Time Saver

Did it save you time?

Blocking

Was it severely blocking?

Common Issue

Are others likely hitting this too?

Flaky / Intermittent

Is it intermittent?

Verified / Reproducible

Can you reproduce it reliably?

#GPU setup #container setup #orchestration issue #cache issue #memory leak

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

nextjs - ✅(Solved) Fix Hydration failure with `useId()` and AG Grid Enterprise [14 pull requests, 29 comments, 13 participants]

Recommended Tools

GitHub issue graph ai analysis

Error Message

Root Cause

Fix Action

Fix / Workaround

PR fix notes

PR #14456: feat: next.js 16 support

Description (problem / solution / changelog)

Current Status / Known Issues

List of Next.js 16-related PRs that were extracted from this branch

List of Next.js / React issues that were fixed - no longer blockers

Changed files

PR #35423: Fix lazy thenable suspension race

Description (problem / solution / changelog)

Summary

Testing

Changed files

PR #3654: [menu][popover][combobox] Fix focus guard handling

Description (problem / solution / changelog)

Changed files

Code Example

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Provide environment information

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

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

Additional context

extent analysis

TL;DR

Guidance

Example

Notes

Recommendation

Still need to ship something?

RELATED_DISCOVERY

TRENDING