chore: bump monorepo Next.js version to 16.2.0 (#15992)

This PR does not bump the Next.js version in the templates yet. First,
let's run our test suite against 16.2.0 and make sure it's fully
compatible.

Author: AlessioGr

.github/workflows/e2e.config.ts

@@ -51,7 +51,7 @@ export default createE2EConfig([
   { file: 'fields__collections__UploadPoly', shards: 1 },
   { file: 'fields__collections__UploadMultiPoly', shards: 1 },
   { file: 'group-by', shards: 1 },
-  { file: 'folders', shards: 1 },
+  { file: 'folders', shards: 3 },
   { file: 'hooks', shards: 1 },
   // TODO: Enable parallel mode again when ensureCompilationIsDone is extracted into a playwright hook. Otherwise,
   // it runs multiple times in parallel, for each single test, which causes the tests to fail occasionally in CI.

package.json

@@ -143,7 +143,7 @@
   "devDependencies": {
     "@axe-core/playwright": "4.11.0",
     "@libsql/client": "0.14.0",
-    "@next/bundle-analyzer": "16.2.0-canary.90",
+    "@next/bundle-analyzer": "16.2.0",
     "@payloadcms/db-postgres": "workspace:*",
     "@payloadcms/eslint-config": "workspace:*",
     "@payloadcms/eslint-plugin": "workspace:*",
@@ -180,7 +180,7 @@
     "lint-staged": "15.2.7",
     "minimist": "1.2.8",
     "mongoose": "8.15.1",
-    "next": "16.2.0-canary.90",
+    "next": "16.2.0",
     "node-gyp": "12.2.0",
     "open": "^10.1.0",
     "p-limit": "^5.0.0",

packages/next/package.json

@@ -131,7 +131,7 @@
     "@babel/preset-env": "7.27.2",
     "@babel/preset-react": "7.27.1",
     "@babel/preset-typescript": "7.27.1",
-    "@next/eslint-plugin-next": "16.2.0-canary.90",
+    "@next/eslint-plugin-next": "16.2.0",
     "@payloadcms/eslint-config": "workspace:*",
     "@types/busboy": "1.5.4",
     "@types/react": "19.2.9",

packages/payload/src/utilities/addDataAndFileToRequest.ts

@@ -51,9 +51,14 @@ export const addDataAndFileToRequest: AddDataAndFileToRequest = async (req) => {
       }
 
       if (!req.file && fields?.file && typeof fields?.file === 'string') {
-        const { clientUploadContext, collectionSlug, filename, mimeType, size } = JSON.parse(
-          fields.file,
-        )
+        let clientUploadContext, collectionSlug, filename, mimeType, size
+        try {
+          ;({ clientUploadContext, collectionSlug, filename, mimeType, size } = JSON.parse(
+            fields.file,
+          ))
+        } catch {
+          throw new APIError('A file name is required.', 400)
+        }
         const uploadConfig = req.payload.collections[collectionSlug]!.config.upload
 
         if (!uploadConfig.handlers) {

packages/ui/src/elements/BulkUpload/FormsManager/index.tsx

@@ -414,24 +414,41 @@ export function FormsManagerProvider({ children }: FormsManagerProps) {
           if (missingFile || exceedsLimit || missingFilename) {
             currentForms[i].formState.file.valid = false
 
-            // neeed to get the field state to extract count since field errors
+            // File/Blob objects cannot be serialized via the RSC flight protocol,
+            // so replace with a plain object before calling the server function.
+            const originalFileValue = currentForms[i].formState.file?.value
+            const formStateForServer = { ...currentForms[i].formState }
+            if (originalFileValue instanceof File) {
+              formStateForServer.file = {
+                ...formStateForServer.file,
+                value: { name: originalFileValue.name },
+              }
+            }
+
+            // Need to get the field state to extract count since field errors
             // are not returned when file is missing or exceeds limit
             const { state: newState } = await getFormState({
               collectionSlug,
               docPermissions,
               docPreferences: null,
-              formState: currentForms[i].formState,
+              formState: formStateForServer,
               operation: 'update',
               schemaPath: collectionSlug,
             })
 
-            currentForms[i] = {
-              errorCount: Object.values(newState).reduce(
-                (acc, value) => (value?.valid === false ? acc + 1 : acc),
-                0,
-              ),
-              formID: currentForms[i].formID,
-              formState: newState,
+            if (newState) {
+              if (originalFileValue instanceof File && newState.file) {
+                newState.file = { ...newState.file, value: originalFileValue }
+              }
+
+              currentForms[i] = {
+                errorCount: Object.values(newState).reduce(
+                  (acc, value) => (value?.valid === false ? acc + 1 : acc),
+                  0,
+                ),
+                formID: currentForms[i].formID,
+                formState: newState,
+              }
             }
 
             toast.error(nonFieldErrors[0]?.message)

pnpm-lock.yaml

@@ -14,6 +14,8 @@ export async function createFolder({
   page,
   folderType = ['Posts'],
 }: Args): Promise<void> {
+  const drawer = page.locator('dialog .collection-edit--payload-folders')
+
   if (fromDropdown) {
     const titleActionsLocator = page.locator('.list-header__title-actions')
     const folderDropdown = titleActionsLocator.locator('.create-new-doc-in-folder__action-popup', {
@@ -23,12 +25,22 @@ export async function createFolder({
     const createFolderButton = page.locator('.popup__content .popup-button-list__button', {
       hasText: 'Folder',
     })
-    await createFolderButton.click()
+    await expect(async () => {
+      if (await drawer.isHidden()) {
+        await createFolderButton.click()
+      }
+      await expect(drawer).toBeVisible()
+    }).toPass({ timeout: 30000 })
   } else {
     const createFolderButton = page.locator(
       '.list-header__title-and-actions .create-new-doc-in-folder__button:has-text("Create folder")',
     )
-    await createFolderButton.click()
+    await expect(async () => {
+      if (await drawer.isHidden()) {
+        await createFolderButton.click()
+      }
+      await expect(drawer).toBeVisible()
+    }).toPass({ timeout: 30000 })
   }
 
   await createFolderDoc({

test/__helpers/e2e/folders/createFolder.ts

@@ -1,6 +1,5 @@
 import { expect, type Page } from '@playwright/test'
 
-import { createFolder } from './createFolder.js'
 import { createFolderDoc } from './createFolderDoc.js'
 
 type Args = {
@@ -17,7 +16,14 @@ export async function createFolderFromDoc({
   const addFolderButton = page.locator('.create-new-doc-in-folder__button', {
     hasText: 'Create folder',
   })
-  await addFolderButton.click()
+  const drawer = page.locator('dialog .collection-edit--payload-folders')
+
+  await expect(async () => {
+    if (await drawer.isHidden()) {
+      await addFolderButton.click()
+    }
+    await expect(drawer).toBeVisible()
+  }).toPass({ timeout: 15000 })
 
   await createFolderDoc({
     page,

test/__helpers/e2e/folders/createFolderFromDoc.ts

@@ -1,5 +1,7 @@
 import type { Page } from '@playwright/test'
 
+import { expect } from '@playwright/test'
+
 import { clickFolderCard } from './clickFolderCard.js'
 
 type Args = {
@@ -14,7 +16,14 @@ export async function selectFolderAndConfirmMoveFromList({
 }: Args): Promise<void> {
   const firstListItem = page.locator(`tbody .row-${rowIndex}`)
   const folderPill = firstListItem.locator('.move-doc-to-folder')
-  await folderPill.click()
+  const moveDrawer = page.locator('dialog .move-folder-drawer')
+
+  await expect(async () => {
+    if (await moveDrawer.isHidden()) {
+      await folderPill.click()
+    }
+    await expect(moveDrawer).toBeVisible()
+  }).toPass({ timeout: 30000 })
 
   if (folderName) {
     await clickFolderCard({ folderName, doubleClick: true, page })

test/__helpers/e2e/folders/selectFolderAndConfirmMoveFromList.ts

@@ -5,14 +5,14 @@ import * as path from 'path'
 import { adminRoute } from 'shared.js'
 import { fileURLToPath } from 'url'
 
+import { login } from '../__helpers/e2e/auth/login.js'
 import {
   ensureCompilationIsDone,
   initPageConsoleErrorCatch,
   saveDocAndAssert,
   // throttleTest,
 } from '../__helpers/e2e/helpers.js'
 import { AdminUrlUtil } from '../__helpers/shared/adminUrlUtil.js'
-import { login } from '../__helpers/e2e/auth/login.js'
 import { initPayloadE2ENoConfig } from '../__helpers/shared/initPayloadE2ENoConfig.js'
 import { TEST_TIMEOUT_LONG } from '../playwright.config.js'
 
@@ -131,7 +131,7 @@ test.describe('Admin Panel (Root)', () => {
     await expect(favicons.nth(0)).toHaveAttribute('sizes', '32x32')
     await expect(favicons.nth(1)).toHaveAttribute('sizes', '32x32')
     await expect(favicons.nth(1)).toHaveAttribute('media', '(prefers-color-scheme: dark)')
-    await expect(favicons.nth(1)).toHaveAttribute('href', /\/payload-favicon-light\.[a-z\d]+\.png/)
+    await expect(favicons.nth(1)).toHaveAttribute('href', /\/payload-favicon-light\.[a-z\d_]+\.png/)
   })
 
   test('config.admin.theme should restrict the theme', async () => {