feat!: upgrade next, react and react-dom, move react/next dependency checker from payload to next package (#8323)

Fixes https://github.com/payloadcms/payload/issues/8013

**BREAKING:**
- Upgrades minimum supported @types/react version from
npm:types-react@19.0.0-rc.0 to npm:types-react@19.0.0-rc.1
- Upgrades minimum supported @types/react-dom version from
npm:types-react-dom@19.0.0-rc.0 to npm:types-react-dom@19.0.0-rc.1
- Upgrades minimum supported react and react-dom version from
19.0.0-rc-06d0b89e-20240801 to 19.0.0-rc-5dcb0097-20240918
- Upgrades minimum supported Next.js version from 15.0.0-canary.104 to
15.0.0-canary.160

---------

Co-authored-by: PatrikKozak <patrik@payloadcms.com>
Co-authored-by: Jacob Fletcher <jacobsfletch@gmail.com>

test/admin-root/e2e.spec.ts

@@ -91,7 +91,7 @@ test.describe('Admin Panel (Root)', () => {
 
   test('ui - should render default payload favicons', async () => {
     await page.goto(url.admin)
-    const favicons = page.locator('link[rel="icon"]')
+    const favicons = page.locator('link[rel="icon"][type="image/png"]')
     await expect(favicons).toHaveCount(2)
     await expect(favicons.nth(0)).toHaveAttribute('sizes', '32x32')
     await expect(favicons.nth(1)).toHaveAttribute('sizes', '32x32')

test/helpers.ts

@@ -309,7 +309,8 @@ export function initPageConsoleErrorCatch(page: Page) {
       !msg.text().includes('did not match. Server:') &&
       !msg.text().includes('the server responded with a status of') &&
       !msg.text().includes('Failed to fetch RSC payload for') &&
-      !msg.text().includes('Error: NEXT_NOT_FOUND')
+      !msg.text().includes('Error: NEXT_NOT_FOUND') &&
+      !msg.text().includes('Error getting document data')
     ) {
       // "Failed to fetch RSC payload for" happens seemingly randomly. There are lots of issues in the next.js repository for this. Causes e2e tests to fail and flake. Will ignore for now
       // the the server responded with a status of error happens frequently. Will ignore it for now.

test/helpers/NextRESTClient.ts

@@ -62,7 +62,7 @@ export class NextRESTClient {
 
   constructor(config: SanitizedConfig) {
     this.config = config
-    if (config?.serverURL) this.serverURL = config.serverURL
+    if (config?.serverURL) {this.serverURL = config.serverURL}
     this._GET = createGET(config)
     this._POST = createPOST(config)
     this._DELETE = createDELETE(config)
@@ -151,33 +151,6 @@ export class NextRESTClient {
     return this._GRAPHQL_POST(request)
   }
 
-  async PATCH(path: ValidPath, options: FileArg & RequestInit & RequestOptions): Promise<Response> {
-    const { slug, params, url } = this.generateRequestParts(path)
-    const { query, ...rest } = options
-    const queryParams = generateQueryString(query, params)
-
-    const request = new Request(`${url}${queryParams}`, {
-      ...rest,
-      headers: this.buildHeaders(options),
-      method: 'PATCH',
-    })
-    return this._PATCH(request, { params: { slug } })
-  }
-
-  async POST(
-    path: ValidPath,
-    options: FileArg & RequestInit & RequestOptions = {},
-  ): Promise<Response> {
-    const { slug, params, url } = this.generateRequestParts(path)
-    const queryParams = generateQueryString({}, params)
-    const request = new Request(`${url}${queryParams}`, {
-      ...options,
-      headers: this.buildHeaders(options),
-      method: 'POST',
-    })
-    return this._POST(request, { params: { slug } })
-  }
-
   async login({
     slug,
     credentials,
@@ -206,4 +179,31 @@ export class NextRESTClient {
 
     return result
   }
+
+  async PATCH(path: ValidPath, options: FileArg & RequestInit & RequestOptions): Promise<Response> {
+    const { slug, params, url } = this.generateRequestParts(path)
+    const { query, ...rest } = options
+    const queryParams = generateQueryString(query, params)
+
+    const request = new Request(`${url}${queryParams}`, {
+      ...rest,
+      headers: this.buildHeaders(options),
+      method: 'PATCH',
+    })
+    return this._PATCH(request, { params: { slug } })
+  }
+
+  async POST(
+    path: ValidPath,
+    options: FileArg & RequestInit & RequestOptions = {},
+  ): Promise<Response> {
+    const { slug, params, url } = this.generateRequestParts(path)
+    const queryParams = generateQueryString({}, params)
+    const request = new Request(`${url}${queryParams}`, {
+      ...options,
+      headers: this.buildHeaders(options),
+      method: 'POST',
+    })
+    return this._POST(request, { params: { slug } })
+  }
 }

test/helpers/e2e/reorderColumns.ts

@@ -40,7 +40,7 @@ export const reorderColumns = async (
     })
     .boundingBox()
 
-  if (!fromBoundingBox || !toBoundingBox) return
+  if (!fromBoundingBox || !toBoundingBox) {return}
 
   // drag the "from" column to the left of the "to" column
   await page.mouse.move(fromBoundingBox.x + 2, fromBoundingBox.y + 2, { steps: 10 })

test/locked-documents/e2e.spec.ts

@@ -22,6 +22,7 @@ const { beforeAll, afterAll, describe } = test
 const lockedDocumentCollection = 'payload-locked-documents'
 
 let page: Page
+let globalUrl: AdminUrlUtil
 let postsUrl: AdminUrlUtil
 let pagesUrl: AdminUrlUtil
 let payload: PayloadTestSDK<Config>
@@ -32,6 +33,7 @@ describe('locked documents', () => {
     testInfo.setTimeout(TEST_TIMEOUT)
     ;({ payload, serverURL } = await initPayloadE2ENoConfig({ dirname }))
 
+    globalUrl = new AdminUrlUtil(serverURL, 'menu')
     postsUrl = new AdminUrlUtil(serverURL, 'posts')
     pagesUrl = new AdminUrlUtil(serverURL, 'pages')
 
@@ -821,10 +823,10 @@ describe('locked documents', () => {
     })
 
     test('should not show lock on document card in dashboard view if locked by current user', async () => {
-      await page.goto(postsUrl.edit('menu'))
-      await page.waitForURL(postsUrl.edit('menu'))
+      await page.goto(globalUrl.global('menu'))
+      await page.waitForURL(globalUrl.global('menu'))
 
-      const textInput = page.locator('#field-text')
+      const textInput = page.locator('#field-globalText')
       await textInput.fill('this is a global menu text field')
 
       await page.reload()

test/package.json

@@ -57,9 +57,9 @@
     "@payloadcms/translations": "workspace:*",
     "@payloadcms/ui": "workspace:*",
     "@sentry/react": "^7.77.0",
-    "@types/react": "npm:types-react@19.0.0-rc.0",
-    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.0",
-    "babel-plugin-react-compiler": "0.0.0-experimental-48eb8f4-20240822",
+    "@types/react": "npm:types-react@19.0.0-rc.1",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
+    "babel-plugin-react-compiler": "0.0.0-experimental-24ec0eb-20240918",
     "comment-json": "^4.2.3",
     "create-payload-app": "workspace:*",
     "dotenv": "16.4.5",
@@ -70,11 +70,11 @@
     "http-status": "1.6.2",
     "jwt-decode": "4.0.0",
     "lexical": "0.17.0",
-    "next": "15.0.0-canary.104",
+    "next": "15.0.0-canary.160",
     "payload": "workspace:*",
     "qs-esm": "7.0.2",
-    "react": "19.0.0-rc-06d0b89e-20240801",
-    "react-dom": "19.0.0-rc-06d0b89e-20240801",
+    "react": "19.0.0-rc-5dcb0097-20240918",
+    "react-dom": "19.0.0-rc-5dcb0097-20240918",
     "server-only": "^0.0.1",
     "slate": "0.91.4",
     "tempy": "^1.0.1",
@@ -84,7 +84,7 @@
     "uuid": "10.0.0"
   },
   "overrides": {
-    "@types/react": "npm:types-react@19.0.0-rc.0",
-    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.0"
+    "@types/react": "npm:types-react@19.0.0-rc.1",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
   }
 }