fix(deps): ensure Next.js 15.2.0 compatibility, upgrade nextjs and @types/react versions in monorepo (#11419)

AlessioGr · web-flow · commit 2a3682ff689f · 2025-02-27T05:56:09.000Z
This bumps next.js to 15.2.0 in our monorepo, as well as all @types/react and @types/react-dom versions. Additionally, it removes the obsolete `peerDependencies` property from our root package.json.

This PR also fixes 2 bugs introduced by Next.js 15.2.0. This highlights why running our test suite against the latest Next.js, to make sure Payload is compatible, version is important.

## 1. handleWhereChange running endlessly

Upgrading to Next.js 15.2.0 caused `handleWhereChange` to be continuously called by a `useEffect` when the list view filters were opened, leading to a React error - I did not investigate why upgrading the Next.js version caused that, but this PR fixes it by making use of the more predictable `useEffectEvent`.

## 2. Custom Block and Array label React key errors

Upgrading to Next.js 15.2.0 caused react key errors when rendering custom block and array row labels on the server. This has been fixed by rendering those with a key

## 3. Table React key errors

When rendering a `Table`, a React key error is thrown since Next.js 15.2.0
diff --git a/package.json b/package.json
@@ -117,7 +117,7 @@
   "devDependencies": {
     "@jest/globals": "29.7.0",
     "@libsql/client": "0.14.0",
-    "@next/bundle-analyzer": "15.1.5",
+    "@next/bundle-analyzer": "15.2.0",
     "@payloadcms/db-postgres": "workspace:*",
     "@payloadcms/eslint-config": "workspace:*",
     "@payloadcms/eslint-plugin": "workspace:*",
@@ -132,8 +132,8 @@
     "@types/jest": "29.5.12",
     "@types/minimist": "1.2.5",
     "@types/node": "22.5.4",
-    "@types/react": "19.0.1",
-    "@types/react-dom": "19.0.1",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
     "@types/shelljs": "0.8.15",
     "chalk": "^4.1.2",
     "comment-json": "^4.2.3",
@@ -153,7 +153,7 @@
     "lint-staged": "15.2.7",
     "minimist": "1.2.8",
     "mongodb-memory-server": "^10",
-    "next": "15.1.5",
+    "next": "15.2.0",
     "open": "^10.1.0",
     "p-limit": "^5.0.0",
     "playwright": "1.50.0",
@@ -173,10 +173,6 @@
     "turbo": "^2.3.3",
     "typescript": "5.7.3"
   },
-  "peerDependencies": {
-    "react": "^19.0.0 || ^19.0.0-rc-65a56d0e-20241020",
-    "react-dom": "^19.0.0 || ^19.0.0-rc-65a56d0e-20241020"
-  },
   "packageManager": "pnpm@9.7.1",
   "engines": {
     "node": "^18.20.2 || >=20.9.0",
diff --git a/packages/live-preview-react/package.json b/packages/live-preview-react/package.json
@@ -45,8 +45,8 @@
   },
   "devDependencies": {
     "@payloadcms/eslint-config": "workspace:*",
-    "@types/react": "19.0.1",
-    "@types/react-dom": "19.0.1",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
     "payload": "workspace:*"
   },
   "peerDependencies": {
diff --git a/packages/next/package.json b/packages/next/package.json
@@ -107,8 +107,8 @@
     "@next/eslint-plugin-next": "15.1.5",
     "@payloadcms/eslint-config": "workspace:*",
     "@types/busboy": "1.5.4",
-    "@types/react": "19.0.1",
-    "@types/react-dom": "19.0.1",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
     "@types/uuid": "10.0.0",
     "babel-plugin-react-compiler": "19.0.0-beta-714736e-20250131",
     "esbuild": "0.24.2",
diff --git a/packages/plugin-cloud-storage/package.json b/packages/plugin-cloud-storage/package.json
@@ -64,8 +64,8 @@
   },
   "devDependencies": {
     "@types/find-node-modules": "^2.1.2",
-    "@types/react": "19.0.1",
-    "@types/react-dom": "19.0.1",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
     "payload": "workspace:*"
   },
   "peerDependencies": {
diff --git a/packages/plugin-form-builder/package.json b/packages/plugin-form-builder/package.json
@@ -67,8 +67,8 @@
   "devDependencies": {
     "@payloadcms/eslint-config": "workspace:*",
     "@types/escape-html": "^1.0.4",
-    "@types/react": "19.0.1",
-    "@types/react-dom": "19.0.1",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "payload": "workspace:*"
diff --git a/packages/plugin-search/package.json b/packages/plugin-search/package.json
@@ -64,8 +64,8 @@
   },
   "devDependencies": {
     "@payloadcms/eslint-config": "workspace:*",
-    "@types/react": "19.0.1",
-    "@types/react-dom": "19.0.1",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
     "payload": "workspace:*"
   },
   "peerDependencies": {
diff --git a/packages/plugin-sentry/package.json b/packages/plugin-sentry/package.json
@@ -58,8 +58,8 @@
   },
   "devDependencies": {
     "@payloadcms/eslint-config": "workspace:*",
-    "@types/react": "19.0.1",
-    "@types/react-dom": "19.0.1",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
     "payload": "workspace:*"
   },
   "peerDependencies": {
diff --git a/packages/plugin-seo/package.json b/packages/plugin-seo/package.json
@@ -70,8 +70,8 @@
   "devDependencies": {
     "@payloadcms/eslint-config": "workspace:*",
     "@payloadcms/next": "workspace:*",
-    "@types/react": "19.0.1",
-    "@types/react-dom": "19.0.1",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
     "payload": "workspace:*"
   },
   "peerDependencies": {
diff --git a/packages/plugin-stripe/package.json b/packages/plugin-stripe/package.json
@@ -71,8 +71,8 @@
     "@payloadcms/eslint-config": "workspace:*",
     "@payloadcms/next": "workspace:*",
     "@types/lodash.get": "^4.4.7",
-    "@types/react": "19.0.1",
-    "@types/react-dom": "19.0.1",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
     "@types/uuid": "10.0.0",
     "payload": "workspace:*"
   },
diff --git a/packages/richtext-lexical/package.json b/packages/richtext-lexical/package.json
@@ -383,8 +383,8 @@
     "@types/escape-html": "1.0.4",
     "@types/json-schema": "7.0.15",
     "@types/node": "22.5.4",
-    "@types/react": "19.0.1",
-    "@types/react-dom": "19.0.1",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
     "babel-plugin-react-compiler": "19.0.0-beta-714736e-20250131",
     "babel-plugin-transform-remove-imports": "^1.8.0",
     "esbuild": "0.24.2",
diff --git a/packages/richtext-slate/package.json b/packages/richtext-slate/package.json
@@ -63,8 +63,8 @@
     "@payloadcms/eslint-config": "workspace:*",
     "@types/is-hotkey": "^0.1.10",
     "@types/node": "22.5.4",
-    "@types/react": "19.0.1",
-    "@types/react-dom": "19.0.1",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
     "payload": "workspace:*"
   },
   "peerDependencies": {
diff --git a/packages/translations/package.json b/packages/translations/package.json
@@ -60,8 +60,8 @@
   "devDependencies": {
     "@payloadcms/eslint-config": "workspace:*",
     "@swc/core": "1.10.12",
-    "@types/react": "19.0.1",
-    "@types/react-dom": "19.0.1",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
     "dotenv": "16.4.7",
     "prettier": "3.3.3",
     "typescript": "5.7.3"
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -147,8 +147,8 @@
     "@babel/preset-typescript": "7.26.0",
     "@hyrious/esbuild-plugin-commonjs": "^0.2.4",
     "@payloadcms/eslint-config": "workspace:*",
-    "@types/react": "19.0.1",
-    "@types/react-dom": "19.0.1",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
     "@types/uuid": "10.0.0",
     "babel-plugin-react-compiler": "19.0.0-beta-714736e-20250131",
     "esbuild": "0.24.2",
diff --git a/packages/ui/src/elements/WhereBuilder/index.tsx b/packages/ui/src/elements/WhereBuilder/index.tsx
@@ -6,15 +6,16 @@ import React, { useMemo } from 'react'
 
 import type { AddCondition, UpdateCondition, WhereBuilderProps } from './types.js'
 
+import { useEffectEvent } from '../../hooks/useEffectEvent.js'
 import { useListQuery } from '../../providers/ListQuery/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { Button } from '../Button/index.js'
 import { Condition } from './Condition/index.js'
 import fieldTypes from './field-types.js'
 import { reduceFields } from './reduceFields.js'
+import './index.scss'
 import { transformWhereQuery } from './transformWhereQuery.js'
 import validateWhereQuery from './validateWhereQuery.js'
-import './index.scss'
 
 const baseClass = 'where-builder'
 
@@ -122,15 +123,16 @@ export const WhereBuilder: React.FC<WhereBuilderProps> = (props) => {
     [conditions],
   )
 
-  React.useEffect(() => {
+  const handleChange = useEffectEvent(async (conditions: Where[]) => {
     if (shouldUpdateQuery) {
-      async function handleChange() {
-        await handleWhereChange({ or: conditions })
-        setShouldUpdateQuery(false)
-      }
-      void handleChange()
+      await handleWhereChange({ or: conditions })
+      setShouldUpdateQuery(false)
     }
-  }, [conditions, handleWhereChange, shouldUpdateQuery])
+  })
+
+  React.useEffect(() => {
+    void handleChange(conditions)
+  }, [conditions])
 
   return (
     <div className={baseClass}>
diff --git a/packages/ui/src/forms/fieldSchemasToFormState/renderField.tsx b/packages/ui/src/forms/fieldSchemasToFormState/renderField.tsx
@@ -125,6 +125,7 @@ export const renderField: RenderFieldMethod = ({
             clientProps,
             Component: fieldConfig.admin.components.RowLabel,
             importMap: req.payload.importMap,
+            key: `${rowIndex}`,
             serverProps: {
               ...serverProps,
               rowLabel: `${getTranslation(fieldConfig.labels.singular, req.i18n)} ${String(
@@ -161,6 +162,7 @@ export const renderField: RenderFieldMethod = ({
             clientProps,
             Component: blockConfig.admin.components.Label,
             importMap: req.payload.importMap,
+            key: `${rowIndex}`,
             serverProps: {
               ...serverProps,
               blockType: row.blockType,
diff --git a/packages/ui/src/utilities/renderTable.tsx b/packages/ui/src/utilities/renderTable.tsx
@@ -195,6 +195,7 @@ export const renderTable = ({
 
   return {
     columnState,
-    Table: <Table appearance={tableAppearance} columns={columnsToUse} data={docs} />,
+    // key is required since Next.js 15.2.0 to prevent React key error
+    Table: <Table appearance={tableAppearance} columns={columnsToUse} data={docs} key="table" />,
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/test/package.json b/test/package.json
