feat!: upgrade minimum next version to 14.3.0-canary.68 & upgrade react packages, react-toastify (#6387)

**BREAKING:**
- The minimum required next version is now 14.3.0-canary.68. This is
because we are migrating away from the deprecated
experimental.serverComponentsExternalPackages next config key to
experimental.serverExternalPackages, which is not available in older
next canaries
- The minimum `react` and `react-dom` versions have been bumped to
^18.2.0 or ^19.0.0. This matches the minimum react version recommended
by next

examples/auth/payload/package.json

@@ -21,7 +21,7 @@
     "@payloadcms/richtext-slate": "3.0.0-beta.24",
     "@payloadcms/ui": "3.0.0-beta.24",
     "cross-env": "^7.0.3",
-    "next": "14.3.0-canary.7",
+    "next": "14.3.0-canary.68",
     "payload": "3.0.0-beta.24",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

examples/form-builder/next-app/package.json

@@ -20,7 +20,7 @@
     "@payloadcms/richtext-lexical": "beta",
     "escape-html": "^1.0.3",
     "graphql": "^16.8.1",
-    "next": "^14.3.0-canary.50",
+    "next": "^14.3.0-canary.68",
     "react": "18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.41.0",

examples/form-builder/next-pages/package.json

@@ -20,7 +20,7 @@
     "@payloadcms/richtext-lexical": "beta",
     "escape-html": "^1.0.3",
     "graphql": "^16.8.1",
-    "next": "^14.3.0-canary.50",
+    "next": "^14.3.0-canary.68",
     "react": "18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.41.0",

examples/form-builder/payload/package.json

@@ -28,7 +28,7 @@
     "@payloadcms/richtext-lexical": "beta",
     "cross-env": "^7.0.3",
     "graphql": "^16.8.1",
-    "next": "14.3.0-canary.28",
+    "next": "14.3.0-canary.68",
     "payload": "beta",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

examples/hierarchy/package.json

@@ -1,20 +1,17 @@
 {
   "name": "hierarchy",
-  "description": "A hierarchy example with Payload",
   "version": "1.0.0",
+  "description": "A hierarchy example with Payload",
   "license": "MIT",
   "type": "module",
   "scripts": {
+    "build": "cross-env NODE_OPTIONS=--no-deprecation next build",
     "dev": "cross-env NODE_OPTIONS=--no-deprecation next dev",
     "devsafe": "rm -rf .next && cross-env NODE_OPTIONS=--no-deprecation next dev",
-    "build": "cross-env NODE_OPTIONS=--no-deprecation next build",
+    "generate:types": "payload generate:types",
-    "payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
-    "start": "cross-env NODE_OPTIONS=--no-deprecation next start",
     "lint": "cross-env NODE_OPTIONS=--no-deprecation next lint",
-    "generate:types": "payload generate:types"
+    "payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
-  },
+    "start": "cross-env NODE_OPTIONS=--no-deprecation next start"
-  "engines": {
-    "node": ">=18.19.0"
   },
   "dependencies": {
     "@payloadcms/db-mongodb": "beta",
@@ -22,7 +19,7 @@
     "@payloadcms/plugin-cloud": "beta",
     "@payloadcms/richtext-lexical": "beta",
     "cross-env": "^7.0.3",
-    "next": "14.3.0-canary.7",
+    "next": "14.3.0-canary.68",
     "payload": "beta",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -35,5 +32,8 @@
     "dotenv": "^16.4.5",
     "tsx": "^4.7.1",
     "typescript": "^5.4.2"
+  },
+  "engines": {
+    "node": ">=18.19.0"
   }
 }

examples/live-preview/payload/package.json

@@ -22,7 +22,7 @@
     "@payloadcms/richtext-slate": "3.0.0-beta.28",
     "@payloadcms/ui": "3.0.0-beta.28",
     "cross-env": "^7.0.3",
-    "next": "14.3.0-canary.7",
+    "next": "14.3.0-canary.68",
     "payload": "3.0.0-beta.28",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

examples/tailwind-shadcn-ui/package.json

@@ -1,20 +1,17 @@
 {
   "name": "tailwind-shadcn",
-  "description": "A blank template to get started with Payload 3.0",
   "version": "1.0.0",
+  "description": "A blank template to get started with Payload 3.0",
   "license": "MIT",
   "type": "module",
   "scripts": {
+    "build": "cross-env NODE_OPTIONS=--no-deprecation next build",
     "dev": "cross-env NODE_OPTIONS=--no-deprecation next dev",
     "devsafe": "rm -rf .next && cross-env NODE_OPTIONS=--no-deprecation next dev",
-    "build": "cross-env NODE_OPTIONS=--no-deprecation next build",
+    "generate:types": "payload generate:types",
-    "payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
-    "start": "cross-env NODE_OPTIONS=--no-deprecation next start",
     "lint": "cross-env NODE_OPTIONS=--no-deprecation next lint",
-    "generate:types": "payload generate:types"
+    "payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
-  },
+    "start": "cross-env NODE_OPTIONS=--no-deprecation next start"
-  "engines": {
-    "node": ">=18.19.0"
   },
   "dependencies": {
     "@payloadcms/db-mongodb": "beta",
@@ -24,7 +21,7 @@
     "clsx": "^2.1.1",
     "cross-env": "^7.0.3",
     "lucide-react": "^0.376.0",
-    "next": "14.3.0-canary.7",
+    "next": "14.3.0-canary.68",
     "payload": "beta",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -42,5 +39,8 @@
     "tailwindcss": "^3.4.3",
     "tsx": "^4.7.1",
     "typescript": "^5.4.2"
+  },
+  "engines": {
+    "node": ">=18.19.0"
   }
 }

examples/virtual-fields/package.json

@@ -1,23 +1,23 @@
 {
   "name": "payload-example-virtual-fields-cms",
   "version": "1.0.0",
-  "main": "dist/server.js",
   "license": "MIT",
+  "main": "dist/server.js",
   "scripts": {
+    "build": "cross-env NODE_OPTIONS=--no-deprecation next build",
     "dev": "cross-env NODE_OPTIONS=--no-deprecation next dev",
     "devsafe": "rm -rf .next && cross-env NODE_OPTIONS=--no-deprecation next dev",
-    "build": "cross-env NODE_OPTIONS=--no-deprecation next build",
+    "generate:types": "payload generate:types",
-    "payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
-    "start": "cross-env NODE_OPTIONS=--no-deprecation next start",
     "lint": "cross-env NODE_OPTIONS=--no-deprecation next lint",
-    "generate:types": "payload generate:types"
+    "payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
+    "start": "cross-env NODE_OPTIONS=--no-deprecation next start"
   },
   "dependencies": {
     "@payloadcms/db-mongodb": "beta",
     "@payloadcms/next": "beta",
     "@payloadcms/richtext-lexical": "beta",
     "cross-env": "^7.0.3",
-    "next": "^14.3.0-canary.7",
+    "next": "^14.3.0-canary.68",
     "payload": "beta",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

examples/whitelabel/package.json

@@ -1,23 +1,23 @@
 {
   "name": "payload-example-whitelabel-cms",
   "version": "1.0.0",
-  "main": "dist/server.js",
   "license": "MIT",
+  "main": "dist/server.js",
   "scripts": {
+    "build": "cross-env NODE_OPTIONS=--no-deprecation next build",
     "dev": "cross-env NODE_OPTIONS=--no-deprecation next dev",
     "devsafe": "rm -rf .next && cross-env NODE_OPTIONS=--no-deprecation next dev",
-    "build": "cross-env NODE_OPTIONS=--no-deprecation next build",
+    "generate:types": "payload generate:types",
-    "payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
-    "start": "cross-env NODE_OPTIONS=--no-deprecation next start",
     "lint": "cross-env NODE_OPTIONS=--no-deprecation next lint",
-    "generate:types": "payload generate:types"
+    "payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
+    "start": "cross-env NODE_OPTIONS=--no-deprecation next start"
   },
   "dependencies": {
     "@payloadcms/db-mongodb": "beta",
     "@payloadcms/next": "beta",
     "@payloadcms/richtext-lexical": "beta",
     "cross-env": "^7.0.3",
-    "next": "^14.3.0-canary.7",
+    "next": "^14.3.0-canary.68",
     "payload": "beta",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package.json

@@ -102,7 +102,7 @@
     "@types/node": "20.12.5",
     "@types/prompts": "^2.4.5",
     "@types/qs": "6.9.14",
-    "@types/react": "18.2.74",
+    "@types/react": "18.3.2",
     "@types/semver": "^7.5.3",
     "@types/shelljs": "0.8.15",
     "add-stream": "^1.0.0",
@@ -132,7 +132,7 @@
     "lint-staged": "^14.0.1",
     "minimist": "1.2.8",
     "mongodb-memory-server": "^9.0",
-    "next": "^14.3.0-canary.7",
+    "next": "14.3.0-canary.68",
     "node-mocks-http": "^1.14.1",
     "nodemon": "3.0.3",
     "open": "^10.1.0",
@@ -144,8 +144,8 @@
     "prettier": "^3.0.3",
     "prompts": "2.4.2",
     "qs": "6.11.2",
-    "react": "^18.0.0",
+    "react": "^18.3.1",
-    "react-dom": "^18.0.0",
+    "react-dom": "^18.3.1",
     "read-stream": "^2.1.1",
     "rimraf": "3.0.2",
     "semver": "^7.5.4",
@@ -166,7 +166,8 @@
     "yocto-queue": "^1.0.0"
   },
   "peerDependencies": {
-    "react": "18.2.0"
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
   },
   "engines": {
     "node": ">=18.20.2",

packages/live-preview-react/package.json

@@ -35,11 +35,12 @@
   },
   "devDependencies": {
     "@payloadcms/eslint-config": "workspace:*",
-    "@types/react": "18.2.74",
+    "@types/react": "18.3.2",
     "payload": "workspace:*"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
   },
   "publishConfig": {
     "exports": {

packages/next/package.json

@@ -56,15 +56,15 @@
     "path-to-regexp": "^6.2.1",
     "qs": "6.11.2",
     "react-diff-viewer-continued": "3.2.6",
-    "react-toastify": "8.2.0",
+    "react-toastify": "10.0.5",
     "sass": "^1.71.1",
     "ws": "^8.16.0"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.1.0",
     "@payloadcms/eslint-config": "workspace:*",
-    "@types/react": "18.2.74",
+    "@types/react": "18.3.2",
-    "@types/react-dom": "18.2.24",
+    "@types/react-dom": "18.3.0",
     "@types/ws": "^8.5.10",
     "css-loader": "^6.10.0",
     "css-minimizer-webpack-plugin": "^6.0.0",
@@ -81,7 +81,7 @@
   },
   "peerDependencies": {
     "graphql": "^16.8.1",
-    "next": "^14.3.0-canary.7",
+    "next": "^14.3.0-canary.68",
     "payload": "workspace:*"
   },
   "engines": {

packages/next/src/withPayload.js

@@ -16,8 +16,9 @@ export const withPayload = (nextConfig = {}) => {
           'libsql',
         ],
       },
-      serverComponentsExternalPackages: [
+    },
-        ...(nextConfig?.experimental?.serverComponentsExternalPackages || []),
+    serverExternalPackages: [
+      ...(nextConfig?.serverExternalPackages || []),
       'drizzle-kit',
       'drizzle-kit/payload',
       'libsql',
@@ -25,7 +26,6 @@ export const withPayload = (nextConfig = {}) => {
       'pino-pretty',
       'graphql',
     ],
-    },
     webpack: (webpackConfig, webpackOptions) => {
       const incomingWebpackConfig =
         typeof nextConfig.webpack === 'function'

packages/plugin-form-builder/package.json

@@ -55,7 +55,7 @@
     "@payloadcms/eslint-config": "workspace:*",
     "@types/escape-html": "^1.0.4",
     "@types/express": "^4.17.21",
-    "@types/react": "18.2.74",
+    "@types/react": "18.3.2",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "nodemon": "3.0.3",
@@ -64,7 +64,8 @@
   },
   "peerDependencies": {
     "payload": "workspace:*",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
   },
   "publishConfig": {
     "exports": {

packages/plugin-redirects/package.json

@@ -49,7 +49,7 @@
   "devDependencies": {
     "@payloadcms/eslint-config": "workspace:*",
     "@types/express": "^4.17.9",
-    "@types/react": "18.2.74",
+    "@types/react": "18.3.2",
     "payload": "workspace:*"
   },
   "peerDependencies": {

packages/plugin-search/package.json

@@ -50,12 +50,13 @@
   "devDependencies": {
     "@payloadcms/eslint-config": "workspace:*",
     "@types/express": "^4.17.9",
-    "@types/react": "18.2.74",
+    "@types/react": "18.3.2",
     "payload": "workspace:*"
   },
   "peerDependencies": {
     "payload": "workspace:*",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
   },
   "publishConfig": {
     "exports": {

packages/plugin-sentry/package.json

@@ -47,7 +47,7 @@
     "@types/express": "^4.17.9",
     "@types/jest": "^29.5.2",
     "@types/node": "20.12.5",
-    "@types/react": "18.2.74",
+    "@types/react": "18.3.2",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "dotenv": "^8.2.0",
@@ -59,7 +59,8 @@
   },
   "peerDependencies": {
     "payload": "workspace:*",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
   },
   "publishConfig": {
     "exports": {

packages/plugin-seo/package.json

@@ -51,14 +51,15 @@
     "@payloadcms/next": "workspace:*",
     "@payloadcms/translations": "workspace:*",
     "@payloadcms/ui": "workspace:*",
-    "@types/react": "18.2.74",
+    "@types/react": "18.3.2",
     "payload": "workspace:*"
   },
   "peerDependencies": {
     "@payloadcms/translations": "workspace:*",
     "@payloadcms/ui": "workspace:*",
     "payload": "workspace:*",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
   },
   "publishConfig": {
     "exports": {

packages/plugin-stripe/package.json

@@ -61,7 +61,7 @@
     "@payloadcms/ui": "workspace:*",
     "@types/express": "^4.17.9",
     "@types/lodash.get": "^4.4.7",
-    "@types/react": "18.2.74",
+    "@types/react": "18.3.2",
     "@types/uuid": "^9.0.0",
     "payload": "workspace:*"
   },

packages/richtext-lexical/package.json

@@ -68,8 +68,8 @@
     "@payloadcms/ui": "workspace:*",
     "@types/json-schema": "7.0.15",
     "@types/node": "20.12.5",
-    "@types/react": "18.2.74",
+    "@types/react": "18.3.2",
-    "@types/react-dom": "18.2.24",
+    "@types/react-dom": "18.3.0",
     "payload": "workspace:*"
   },
   "peerDependencies": {
@@ -88,8 +88,8 @@
     "@payloadcms/ui": "workspace:*",
     "lexical": "0.15.0",
     "payload": "workspace:*",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react-dom": "^18.2.0 || ^19.0.0"
   },
   "engines": {
     "node": ">=18.20.2"

packages/richtext-slate/package.json

@@ -43,14 +43,14 @@
     "@payloadcms/eslint-config": "workspace:*",
     "@payloadcms/ui": "workspace:*",
     "@types/node": "20.12.5",
-    "@types/react": "18.2.74",
+    "@types/react": "18.3.2",
     "payload": "workspace:*"
   },
   "peerDependencies": {
     "@payloadcms/translations": "workspace:*",
     "@payloadcms/ui": "workspace:*",
     "payload": "workspace:*",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^18.0.0 || ^19.0.0"
   },
   "engines": {
     "node": ">=18.20.2"

packages/translations/package.json

@@ -37,7 +37,7 @@
   "devDependencies": {
     "@payloadcms/eslint-config": "workspace:*",
     "@swc/core": "^1.4.13",
-    "@types/react": "18.2.74",
+    "@types/react": "18.3.2",
     "date-fns": "3.3.1",
     "dotenv": "8.6.0",
     "prettier": "^3.0.3",

packages/ui/package.json

@@ -111,7 +111,7 @@
     "react-datepicker": "6.2.0",
     "react-image-crop": "10.1.8",
     "react-select": "5.7.4",
-    "react-toastify": "10.0.4",
+    "react-toastify": "10.0.5",
     "use-context-selector": "1.4.1",
     "uuid": "9.0.1"
   },
@@ -119,9 +119,9 @@
     "@payloadcms/eslint-config": "workspace:*",
     "@types/body-scroll-lock": "^3.1.0",
     "@types/qs": "6.9.7",
-    "@types/react": "18.2.74",
+    "@types/react": "18.3.2",
     "@types/react-datepicker": "4.11.2",
-    "@types/react-dom": "18.2.24",
+    "@types/react-dom": "18.3.0",
     "@types/uuid": "8.3.4",
     "css-loader": "^6.10.0",
     "css-minimizer-webpack-plugin": "^6.0.0",
@@ -137,10 +137,10 @@
     "webpack-cli": "^5.1.4"
   },
   "peerDependencies": {
-    "next": "^14.3.0-canary.7",
+    "next": "^14.3.0-canary.68",
     "payload": "workspace:*",
-    "react": "^18.0.0",
+    "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.2.0 || ^19.0.0"
   },
   "engines": {
     "node": ">=18.20.2"

packages/ui/src/elements/Banner/index.tsx

@@ -55,7 +55,7 @@ export const Banner: React.FC<Props> = ({
   if (to) RenderedType = Link
 
   return (
-    <RenderedType className={classes} href={to || ''} onClick={onClick}>
+    <RenderedType className={classes} href={to || null} onClick={onClick}>
       {icon && alignIcon === 'left' && <React.Fragment>{icon}</React.Fragment>}
       <span className={`${baseClass}__content`}>{children}</span>
       {icon && alignIcon === 'right' && <React.Fragment>{icon}</React.Fragment>}

packages/ui/src/elements/Pill/index.tsx

@@ -108,7 +108,7 @@ const StaticPill: React.FC<PillProps> = (props) => {
       aria-expanded={ariaExpanded}
       aria-label={ariaLabel}
       className={classes}
-      href={to || ''}
+      href={to || null}
       onClick={onClick}
       type={Element === 'button' ? 'button' : undefined}
     >

packages/ui/src/forms/Form/index.tsx

@@ -578,7 +578,7 @@ export const Form: React.FC<FormProps> = (props) => {
 
   return (
     <form
-      action={method ? actionString : action}
+      action={method ? actionString : (action as string)}
       className={classes}
       method={method}
       noValidate

templates/blank-3.0/package.json

@@ -20,21 +20,20 @@
     "@payloadcms/richtext-lexical": "beta",
     "cross-env": "^7.0.3",
     "graphql": "^16.8.1",
-    "next": "14.3.0-canary.28",
+    "next": "14.3.0-canary.68",
     "payload": "beta",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "sharp": "0.32.6"
   },
   "devDependencies": {
-    "@types/node": "^20.11.25",
+    "@types/node": "^20.12.12",
-    "@types/react": "^18.2.64",
+    "@types/react": "^18.3.2",
-    "@types/react-dom": "^18.2.21",
+    "@types/react-dom": "^18.3.0",
     "dotenv": "^16.4.5",
-    "tsx": "^4.7.1",
+    "typescript": "^5.4.5"
-    "typescript": "^5.4.2"
   },
   "engines": {
-    "node": ">=18.19.0"
+    "node": "^18.20.2 || >=20.6.0"
   }
 }

test/playwright.config.ts

@@ -9,7 +9,7 @@ const dirname = path.dirname(filename)
 dotenv.config({ path: path.resolve(dirname, 'test.env') })
 
 export const TEST_TIMEOUT_LONG = 480000 // 8 minutes - used as timeOut for the beforeAll
-export const TEST_TIMEOUT = 60000
+export const TEST_TIMEOUT = 120000
 export const EXPECT_TIMEOUT = 8000
 export const POLL_TOPASS_TIMEOUT = EXPECT_TIMEOUT * 4 // That way expect.poll() or expect().toPass can retry 4 times. 4x higher than default expect timeout => can retry 4 times if retryable expects are used inside