feat!: next.js 15, react 19, react compiler support (#6429)

**BREAKING:** - bumps minimum required next.js version from `14.3.0-canary.68` to `15.0.0-rc.0` - bumps minimum required react and react-dom versions to `19.0.0 `(`19.0.0-rc-f994737d14-20240522` should be used) - `@types/react` and `@types/react-dom` have to be bumped to `npm:types-react@19.0.0-beta.2` using overrides and pnpm overrides, if you want correct types. You can find an example of this here: https://github.com/payloadcms/payload/pull/6429/files#diff-10cb9e57a77733f174ee2888587281e94c31f79e434aa3f932a8ec72fa7a5121L32 ## Issues - Bunch of todos for our react-select package which is having type issues. Works fine, just type issues. Their type defs are importing JSX in a weird way, we likely just have to wait until they fix them in a future update.
2024-05-23 13:30:12 -04:00
parent 85bfca79ef
commit 35f961fecb
89 changed files with 1446 additions and 1057 deletions
--- a/.swcrc
+++ b/.swcrc
@@ -7,6 +7,15 @@
      "syntax": "typescript",
      "tsx": true,
      "dts": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": true,
+        "development": false,
+        "useBuiltins": true
+      }
    }
  },
  "module": {
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -16,6 +16,9 @@ export default withBundleAnalyzer(
    typescript: {
      ignoreBuildErrors: true,
    },
+    experimental: {
+      reactCompiler: false
+    },
    async redirects() {
      return [
        {
--- a/package.json
+++ b/package.json
@@ -102,7 +102,8 @@
    "@types/node": "20.12.5",
    "@types/prompts": "^2.4.5",
    "@types/qs": "6.9.14",
-    "@types/react": "18.3.2",
+    "@types/react": "npm:types-react@19.0.0-beta.2",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2",
    "@types/semver": "^7.5.3",
    "@types/shelljs": "0.8.15",
    "add-stream": "^1.0.0",
@@ -132,7 +133,7 @@
    "lint-staged": "^14.0.1",
    "minimist": "1.2.8",
    "mongodb-memory-server": "^9.0",
-    "next": "14.3.0-canary.68",
+    "next": "15.0.0-rc.0",
    "node-mocks-http": "^1.14.1",
    "nodemon": "3.0.3",
    "open": "^10.1.0",
@@ -144,8 +145,8 @@
    "prettier": "^3.0.3",
    "prompts": "2.4.2",
    "qs": "6.11.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0-rc-f994737d14-20240522",
+    "react-dom": "^19.0.0-rc-f994737d14-20240522",
    "read-stream": "^2.1.1",
    "rimraf": "3.0.2",
    "semver": "^7.5.4",
@@ -166,8 +167,8 @@
    "yocto-queue": "^1.0.0"
  },
  "peerDependencies": {
-    "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0"
+    "react": "^19.0.0 || ^19.0.0-rc-f994737d14-20240522",
+    "react-dom": "^19.0.0 || ^19.0.0-rc-f994737d14-20240522"
  },
  "engines": {
    "node": ">=18.20.2",
@@ -180,6 +181,8 @@
      "uuid": "3.4.0"
    },
    "overrides": {
+      "@types/react": "npm:types-react@19.0.0-beta.2",
+      "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2",
      "copyfiles": "$copyfiles",
      "cross-env": "$cross-env",
      "dotenv": "$dotenv",
@@ -194,6 +197,10 @@
      "playwright@1.43.0": "patches/playwright@1.43.0.patch"
    }
  },
+  "overrides": {
+    "@types/react": "npm:types-react@19.0.0-beta.2",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2"
+  },
  "workspaces:": [
    "packages/*",
    "test/*"
--- a/packages/create-payload-app/.swcrc
+++ b/packages/create-payload-app/.swcrc
@@ -7,6 +7,15 @@
      "syntax": "typescript",
      "tsx": true,
      "dts": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": true,
+        "development": false,
+        "useBuiltins": true
+      }
    }
  },
  "module": {
--- a/packages/email-nodemailer/.swcrc
+++ b/packages/email-nodemailer/.swcrc
@@ -7,6 +7,15 @@
      "syntax": "typescript",
      "tsx": true,
      "dts": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": true,
+        "development": false,
+        "useBuiltins": true
+      }
    }
  },
  "module": {
--- a/packages/email-resend/.swcrc
+++ b/packages/email-resend/.swcrc
@@ -7,6 +7,15 @@
      "syntax": "typescript",
      "tsx": true,
      "dts": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": true,
+        "development": false,
+        "useBuiltins": true
+      }
    }
  },
  "module": {
--- a/packages/email-resend/.swcrc-build
+++ b/packages/email-resend/.swcrc-build
@@ -11,6 +11,15 @@
      "syntax": "typescript",
      "tsx": true,
      "dts": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": true,
+        "development": false,
+        "useBuiltins": true
+      }
    }
  },
  "module": {
--- a/packages/live-preview-react/.swcrc
+++ b/packages/live-preview-react/.swcrc
@@ -7,6 +7,15 @@
      "syntax": "typescript",
      "tsx": true,
      "dts": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": true,
+        "development": false,
+        "useBuiltins": true
+      }
    }
  },
  "module": {
--- a/packages/live-preview-react/package.json
+++ b/packages/live-preview-react/package.json
@@ -35,12 +35,13 @@
  },
  "devDependencies": {
    "@payloadcms/eslint-config": "workspace:*",
-    "@types/react": "18.3.2",
+    "@types/react": "npm:types-react@19.0.0-beta.2",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2",
    "payload": "workspace:*"
  },
  "peerDependencies": {
-    "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0"
+    "react": "^19.0.0 || ^19.0.0-rc-f994737d14-20240522",
+    "react-dom": "^19.0.0 || ^19.0.0-rc-f994737d14-20240522"
  },
  "publishConfig": {
    "exports": {
@@ -53,5 +54,9 @@
    "main": "./dist/index.js",
    "registry": "https://registry.npmjs.org/",
    "types": "./dist/index.d.ts"
+  },
+  "overrides": {
+    "@types/react": "npm:types-react@19.0.0-beta.2",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2"
  }
 }
--- a/packages/live-preview-react/tsconfig.json
+++ b/packages/live-preview-react/tsconfig.json
@@ -6,7 +6,7 @@
    "emitDeclarationOnly": true,
    "outDir": "./dist" /* Specify an output folder for all emitted files. */,
    "rootDir": "./src" /* Specify the root folder within your source files. */,
-    "jsx": "react"
+    "jsx": "react-jsx"
  },
  "exclude": [
    "dist",
--- a/packages/live-preview-vue/tsconfig.json
+++ b/packages/live-preview-vue/tsconfig.json
@@ -6,7 +6,7 @@
    "emitDeclarationOnly": true,
    "outDir": "./dist" /* Specify an output folder for all emitted files. */,
    "rootDir": "./src" /* Specify the root folder within your source files. */,
-    "jsx": "react"
+    "jsx": "react-jsx"
  },
  "exclude": [
    "dist",
--- a/packages/live-preview/.swcrc
+++ b/packages/live-preview/.swcrc
@@ -7,6 +7,15 @@
      "syntax": "typescript",
      "tsx": true,
      "dts": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": true,
+        "development": false,
+        "useBuiltins": true
+      }
    }
  },
  "module": {
--- a/packages/next/.swcrc
+++ b/packages/next/.swcrc
@@ -8,6 +8,15 @@
      "tsx": true,
      "dts": true
    },
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": true,
+        "development": false,
+        "useBuiltins": true
+      }
+    }
    "experimental": {
      "plugins": [
        [
--- a/packages/next/.swcrc-cjs
+++ b/packages/next/.swcrc-cjs
@@ -7,6 +7,15 @@
      "syntax": "typescript",
      "tsx": true,
      "dts": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": true,
+        "development": false,
+        "useBuiltins": true
+      }
    }
  },
  "module": {
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -49,7 +49,7 @@
    "@types/busboy": "^1.5.3",
    "busboy": "^1.6.0",
    "deep-equal": "2.2.2",
-    "file-type": "19.0.0",
+    "file-type": "19.0.0 || 19.0.0-rc-f994737d14-20240522",
    "graphql-http": "^1.22.0",
    "graphql-playground-html": "1.6.30",
    "http-status": "1.6.2",
@@ -63,8 +63,8 @@
  "devDependencies": {
    "@next/eslint-plugin-next": "^14.1.0",
    "@payloadcms/eslint-config": "workspace:*",
-    "@types/react": "18.3.2",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "npm:types-react@19.0.0-beta.2",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2",
    "@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.68",
+    "next": "^15.0.0-rc.0",
    "payload": "workspace:*"
  },
  "engines": {
@@ -107,5 +107,9 @@
    "main": "./dist/index.js",
    "registry": "https://registry.npmjs.org/",
    "types": "./dist/index.d.ts"
+  },
+  "overrides": {
+    "@types/react": "npm:types-react@19.0.0-beta.2",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2"
  }
 }
--- a/packages/next/src/views/LivePreview/Context/context.ts
+++ b/packages/next/src/views/LivePreview/Context/context.ts
@@ -13,7 +13,7 @@ export interface LivePreviewContextType {
  breakpoints: LivePreviewConfig['breakpoints']
  fieldSchemaJSON?: ReturnType<typeof fieldSchemaToJSON>
  iframeHasLoaded: boolean
-  iframeRef: React.RefObject<HTMLIFrameElement>
+  iframeRef: React.RefObject<HTMLIFrameElement | null>
  isPopupOpen: boolean
  measuredDeviceSize: {
    height: number
--- a/packages/next/src/views/LivePreview/Preview/index.tsx
+++ b/packages/next/src/views/LivePreview/Preview/index.tsx
@@ -32,7 +32,7 @@ export const LivePreview: React.FC<EditViewProps> = (props) => {
  const { breakpoint, fieldSchemaJSON } = useLivePreviewContext()

  const prevWindowType =
-    React.useRef<ReturnType<typeof useLivePreviewContext>['previewWindowType']>()
+    React.useRef<ReturnType<typeof useLivePreviewContext>['previewWindowType']>(undefined)

  const [fields] = useAllFormFields()

--- a/packages/next/src/views/Root/index.tsx
+++ b/packages/next/src/views/Root/index.tsx
@@ -100,7 +100,12 @@ export const RootPage = async ({
          permissions={initPageResult?.permissions}
          searchParams={searchParams}
          user={initPageResult?.req.user}
-          visibleEntities={initPageResult.visibleEntities}
+          visibleEntities={{
+            // The reason we are not passing in initPageResult.visibleEntities directly is due to a "Cannot assign to read only property of object '#<Object>" error introduced in React 19
+            // which this caused as soon as initPageResult.visibleEntities is passed in
+            collections: initPageResult.visibleEntities?.collections,
+            globals: initPageResult.visibleEntities?.globals,
+          }}
        >
          {RenderedView}
        </DefaultTemplate>
--- a/packages/payload/.swcrc
+++ b/packages/payload/.swcrc
@@ -7,6 +7,15 @@
      "syntax": "typescript",
      "tsx": true,
      "dts": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": true,
+        "development": false,
+        "useBuiltins": true
+      }
    }
  },
  "module": {
--- a/packages/payload/src/config/types.ts
+++ b/packages/payload/src/config/types.ts
@@ -9,6 +9,7 @@ import type GraphQL from 'graphql'
 import type { Metadata as NextMetadata } from 'next'
 import type { DestinationStream, LoggerOptions } from 'pino'
 import type React from 'react'
+import type { JSX } from 'react'
 import type { default as sharp } from 'sharp'
 import type { DeepRequired } from 'ts-essentials'

--- a/packages/plugin-cloud/.swcrc-build
+++ b/packages/plugin-cloud/.swcrc-build
@@ -8,6 +8,15 @@
      "syntax": "typescript",
      "tsx": true,
      "dts": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": true,
+        "development": false,
+        "useBuiltins": true
+      }
    }
  },
  "module": {
--- a/packages/plugin-form-builder/.swcrc
+++ b/packages/plugin-form-builder/.swcrc
@@ -8,6 +8,15 @@
      "syntax": "typescript",
      "tsx": true,
      "dts": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": true,
+        "development": false,
+        "useBuiltins": true
+      }
    }
  },
  "module": {
--- a/packages/plugin-form-builder/package.json
+++ b/packages/plugin-form-builder/package.json
@@ -55,7 +55,8 @@
    "@payloadcms/eslint-config": "workspace:*",
    "@types/escape-html": "^1.0.4",
    "@types/express": "^4.17.21",
-    "@types/react": "18.3.2",
+    "@types/react": "npm:types-react@19.0.0-beta.2",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2",
    "copyfiles": "^2.4.1",
    "cross-env": "^7.0.3",
    "nodemon": "3.0.3",
@@ -64,8 +65,8 @@
  },
  "peerDependencies": {
    "payload": "workspace:*",
-    "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0"
+    "react": "^19.0.0 || ^19.0.0-rc-f994737d14-20240522",
+    "react-dom": "^19.0.0 || ^19.0.0-rc-f994737d14-20240522"
  },
  "publishConfig": {
    "exports": {
@@ -84,5 +85,9 @@
    "registry": "https://registry.npmjs.org/",
    "types": "./dist/index.d.ts"
  },
-  "homepage:": "https://payloadcms.com"
+  "homepage:": "https://payloadcms.com",
+  "overrides": {
+    "@types/react": "npm:types-react@19.0.0-beta.2",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2"
+  }
 }
--- a/packages/plugin-nested-docs/.swcrc
+++ b/packages/plugin-nested-docs/.swcrc
@@ -7,6 +7,15 @@
      "syntax": "typescript",
      "tsx": true,
      "dts": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": true,
+        "development": false,
+        "useBuiltins": true
+      }
    }
  },
  "module": {
--- a/packages/plugin-nested-docs/tsconfig.json
+++ b/packages/plugin-nested-docs/tsconfig.json
@@ -6,7 +6,7 @@
    "emitDeclarationOnly": true,
    "outDir": "./dist" /* Specify an output folder for all emitted files. */,
    "rootDir": "./src" /* Specify the root folder within your source files. */,
-    "jsx": "react"
+    "jsx": "react-jsx"
  },
  "exclude": [
    "dist",
--- a/packages/plugin-redirects/.swcrc
+++ b/packages/plugin-redirects/.swcrc
@@ -7,6 +7,15 @@
      "syntax": "typescript",
      "tsx": true,
      "dts": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": true,
+        "development": false,
+        "useBuiltins": true
+      }
    }
  },
  "module": {
--- a/packages/plugin-redirects/package.json
+++ b/packages/plugin-redirects/package.json
@@ -49,7 +49,8 @@
  "devDependencies": {
    "@payloadcms/eslint-config": "workspace:*",
    "@types/express": "^4.17.9",
-    "@types/react": "18.3.2",
+    "@types/react": "npm:types-react@19.0.0-beta.2",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2",
    "payload": "workspace:*"
  },
  "peerDependencies": {
@@ -71,5 +72,9 @@
    "main": "./dist/index.js",
    "types": "./dist/index.d.ts"
  },
-  "homepage:": "https://payloadcms.com"
+  "homepage:": "https://payloadcms.com",
+  "overrides": {
+    "@types/react": "npm:types-react@19.0.0-beta.2",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2"
+  }
 }
--- a/packages/plugin-search/.swcrc
+++ b/packages/plugin-search/.swcrc
@@ -7,6 +7,15 @@
      "syntax": "typescript",
      "tsx": true,
      "dts": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": true,
+        "development": false,
+        "useBuiltins": true
+      }
    }
  },
  "module": {
--- a/packages/plugin-search/package.json
+++ b/packages/plugin-search/package.json
@@ -50,13 +50,14 @@
  "devDependencies": {
    "@payloadcms/eslint-config": "workspace:*",
    "@types/express": "^4.17.9",
-    "@types/react": "18.3.2",
+    "@types/react": "npm:types-react@19.0.0-beta.2",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2",
    "payload": "workspace:*"
  },
  "peerDependencies": {
    "payload": "workspace:*",
-    "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0"
+    "react": "^19.0.0 || ^19.0.0-rc-f994737d14-20240522",
+    "react-dom": "^19.0.0 || ^19.0.0-rc-f994737d14-20240522"
  },
  "publishConfig": {
    "exports": {
@@ -75,5 +76,9 @@
    "registry": "https://registry.npmjs.org/",
    "types": "./dist/index.d.ts"
  },
-  "homepage:": "https://payloadcms.com"
+  "homepage:": "https://payloadcms.com",
+  "overrides": {
+    "@types/react": "npm:types-react@19.0.0-beta.2",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2"
+  }
 }
--- a/packages/plugin-sentry/.swcrc-build
+++ b/packages/plugin-sentry/.swcrc-build
@@ -8,6 +8,15 @@
      "syntax": "typescript",
      "tsx": true,
      "dts": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": true,
+        "development": false,
+        "useBuiltins": true
+      }
    }
  },
  "module": {
--- a/packages/plugin-sentry/package.json
+++ b/packages/plugin-sentry/package.json
@@ -47,7 +47,8 @@
    "@types/express": "^4.17.9",
    "@types/jest": "^29.5.2",
    "@types/node": "20.12.5",
-    "@types/react": "18.3.2",
+    "@types/react": "npm:types-react@19.0.0-beta.2",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2",
    "copyfiles": "^2.4.1",
    "cross-env": "^7.0.3",
    "dotenv": "^8.2.0",
@@ -59,8 +60,8 @@
  },
  "peerDependencies": {
    "payload": "workspace:*",
-    "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0"
+    "react": "^19.0.0 || ^19.0.0-rc-f994737d14-20240522",
+    "react-dom": "^19.0.0 || ^19.0.0-rc-f994737d14-20240522"
  },
  "publishConfig": {
    "exports": {
@@ -73,5 +74,9 @@
    "main": "./dist/index.js",
    "types": "./dist/index.d.ts"
  },
-  "homepage:": "https://payloadcms.com"
+  "homepage:": "https://payloadcms.com",
+  "overrides": {
+    "@types/react": "npm:types-react@19.0.0-beta.2",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2"
+  }
 }
--- a/packages/plugin-seo/.swcrc
+++ b/packages/plugin-seo/.swcrc
@@ -7,6 +7,15 @@
      "syntax": "typescript",
      "tsx": true,
      "dts": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": true,
+        "development": false,
+        "useBuiltins": true
+      }
    }
  },
  "module": {
--- a/packages/plugin-seo/package.json
+++ b/packages/plugin-seo/package.json
@@ -51,15 +51,16 @@
    "@payloadcms/next": "workspace:*",
    "@payloadcms/translations": "workspace:*",
    "@payloadcms/ui": "workspace:*",
-    "@types/react": "18.3.2",
+    "@types/react": "npm:types-react@19.0.0-beta.2",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2",
    "payload": "workspace:*"
  },
  "peerDependencies": {
    "@payloadcms/translations": "workspace:*",
    "@payloadcms/ui": "workspace:*",
    "payload": "workspace:*",
-    "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0"
+    "react": "^19.0.0 || ^19.0.0-rc-f994737d14-20240522",
+    "react-dom": "^19.0.0 || ^19.0.0-rc-f994737d14-20240522"
  },
  "publishConfig": {
    "exports": {
@@ -78,5 +79,9 @@
    "registry": "https://registry.npmjs.org/",
    "types": "./dist/index.d.ts"
  },
-  "homepage:": "https://payloadcms.com"
+  "homepage:": "https://payloadcms.com",
+  "overrides": {
+    "@types/react": "npm:types-react@19.0.0-beta.2",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2"
+  }
 }
--- a/packages/plugin-stripe/.swcrc
+++ b/packages/plugin-stripe/.swcrc
@@ -7,6 +7,15 @@
      "syntax": "typescript",
      "tsx": true,
      "dts": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": true,
+        "development": false,
+        "useBuiltins": true
+      }
    }
  },
  "module": {
--- a/packages/plugin-stripe/package.json
+++ b/packages/plugin-stripe/package.json
@@ -61,7 +61,8 @@
    "@payloadcms/ui": "workspace:*",
    "@types/express": "^4.17.9",
    "@types/lodash.get": "^4.4.7",
-    "@types/react": "18.3.2",
+    "@types/react": "npm:types-react@19.0.0-beta.2",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2",
    "@types/uuid": "^9.0.0",
    "payload": "workspace:*"
  },
@@ -87,5 +88,9 @@
    "registry": "https://registry.npmjs.org/",
    "types": "./dist/index.d.ts"
  },
-  "homepage:": "https://payloadcms.com"
+  "homepage:": "https://payloadcms.com",
+  "overrides": {
+    "@types/react": "npm:types-react@19.0.0-beta.2",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2"
+  }
 }
--- a/packages/richtext-lexical/.swcrc
+++ b/packages/richtext-lexical/.swcrc
@@ -7,6 +7,15 @@
      "syntax": "typescript",
      "tsx": true,
      "dts": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": true,
+        "development": false,
+        "useBuiltins": true
+      }
    }
  },
  "module": {
--- a/packages/richtext-lexical/package.json
+++ b/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.3.2",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "npm:types-react@19.0.0-beta.2",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2",
    "payload": "workspace:*"
  },
  "peerDependencies": {
@@ -88,8 +88,8 @@
    "@payloadcms/ui": "workspace:*",
    "lexical": "0.15.0",
    "payload": "workspace:*",
-    "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0"
+    "react": "^19.0.0 || ^19.0.0-rc-f994737d14-20240522",
+    "react-dom": "^19.0.0 || ^19.0.0-rc-f994737d14-20240522"
  },
  "engines": {
    "node": ">=18.20.2"
@@ -110,5 +110,9 @@
    "main": "./dist/index.js",
    "registry": "https://registry.npmjs.org/",
    "types": "./dist/index.d.ts"
+  },
+  "overrides": {
+    "@types/react": "npm:types-react@19.0.0-beta.2",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2"
  }
 }
--- a/packages/richtext-lexical/src/field/features/blocks/nodes/BlocksNode.tsx
+++ b/packages/richtext-lexical/src/field/features/blocks/nodes/BlocksNode.tsx
@@ -12,7 +12,7 @@ import type {

 import { DecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode.js'
 import ObjectID from 'bson-objectid'
-import React from 'react'
+import React, { type JSX } from 'react'

 export type BlockFields = {
  /** Block form data */
--- a/packages/richtext-lexical/src/field/features/debug/testRecorder/plugin/index.tsx
+++ b/packages/richtext-lexical/src/field/features/debug/testRecorder/plugin/index.tsx
@@ -4,7 +4,7 @@ import type { BaseSelection, LexicalEditor } from 'lexical'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
 import { $createParagraphNode, $createTextNode, $getRoot } from 'lexical'
 import * as React from 'react'
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { type JSX, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'

 import type { PluginComponent } from '../../../types.js'

--- a/packages/richtext-lexical/src/field/features/migrations/lexicalPluginToLexical/nodes/unknownConvertedNode/index.tsx
+++ b/packages/richtext-lexical/src/field/features/migrations/lexicalPluginToLexical/nodes/unknownConvertedNode/index.tsx
@@ -1,5 +1,6 @@
 import type { SerializedLexicalNode, Spread } from 'lexical'
 import type { EditorConfig, LexicalNode, NodeKey } from 'lexical'
+import type { JSX } from 'react'

 import { addClassNamesToElement } from '@lexical/utils'
 import { DecoratorNode } from 'lexical'
--- a/packages/richtext-lexical/src/field/features/migrations/slateToLexical/nodes/unknownConvertedNode/index.tsx
+++ b/packages/richtext-lexical/src/field/features/migrations/slateToLexical/nodes/unknownConvertedNode/index.tsx
@@ -1,5 +1,6 @@
 import type { SerializedLexicalNode, Spread } from 'lexical'
 import type { EditorConfig, LexicalNode, NodeKey } from 'lexical'
+import type { JSX } from 'react'

 import { addClassNamesToElement } from '@lexical/utils'
 import { DecoratorNode } from 'lexical'
--- a/packages/richtext-lexical/src/field/features/relationship/nodes/RelationshipNode.tsx
+++ b/packages/richtext-lexical/src/field/features/relationship/nodes/RelationshipNode.tsx
@@ -10,6 +10,7 @@ import type {
  NodeKey,
  Spread,
 } from 'lexical'
+import type { JSX } from 'react'

 import { DecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode.js'
 import * as React from 'react'
--- a/packages/richtext-lexical/src/field/features/toolbars/shared/ToolbarDropdown/DropDown.tsx
+++ b/packages/richtext-lexical/src/field/features/toolbars/shared/ToolbarDropdown/DropDown.tsx
@@ -10,7 +10,7 @@ import type { ToolbarGroupItem } from '../../types.js'
 const baseClass = 'toolbar-popup__dropdown-item'

 interface DropDownContextType {
-  registerItem: (ref: React.RefObject<HTMLButtonElement>) => void
+  registerItem: (ref: React.RefObject<HTMLButtonElement | null>) => void
 }

 const DropDownContext = React.createContext<DropDownContextType | null>(null)
@@ -102,11 +102,12 @@ function DropDownItems({
  itemsContainerClassNames?: string[]
  onClose: () => void
 }): React.ReactElement {
-  const [items, setItems] = useState<Array<React.RefObject<HTMLButtonElement>>>()
-  const [highlightedItem, setHighlightedItem] = useState<React.RefObject<HTMLButtonElement>>()
+  const [items, setItems] = useState<Array<React.RefObject<HTMLButtonElement | null>>>()
+  const [highlightedItem, setHighlightedItem] =
+    useState<React.RefObject<HTMLButtonElement | null>>()

  const registerItem = useCallback(
-    (itemRef: React.RefObject<HTMLButtonElement>) => {
+    (itemRef: React.RefObject<HTMLButtonElement | null>) => {
      setItems((prev) => (prev != null ? [...prev, itemRef] : [itemRef]))
    },
    [setItems],
@@ -233,6 +234,17 @@ export function DropDown({
    }
  }, [dropDownRef, buttonRef, showDropDown, stopCloseOnClickSelf])

+  const portal = createPortal(
+    <DropDownItems
+      dropDownRef={dropDownRef}
+      itemsContainerClassNames={itemsContainerClassNames}
+      onClose={handleClose}
+    >
+      {children}
+    </DropDownItems>,
+    document.body,
+  )
+
  return (
    <React.Fragment>
      <button
@@ -257,17 +269,7 @@ export function DropDown({
        <i className="toolbar-popup__dropdown-caret" />
      </button>

-      {showDropDown &&
-        createPortal(
-          <DropDownItems
-            dropDownRef={dropDownRef}
-            itemsContainerClassNames={itemsContainerClassNames}
-            onClose={handleClose}
-          >
-            {children}
-          </DropDownItems>,
-          document.body,
-        )}
+      {showDropDown && <React.Fragment>{portal}</React.Fragment>}
    </React.Fragment>
  )
 }
--- a/packages/richtext-lexical/src/field/features/upload/nodes/UploadNode.tsx
+++ b/packages/richtext-lexical/src/field/features/upload/nodes/UploadNode.tsx
@@ -7,6 +7,7 @@ import type {
  LexicalNode,
  Spread,
 } from 'lexical'
+import type { JSX } from 'react'

 import { DecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode.js'
 import { $applyNodeReplacement } from 'lexical'
--- a/packages/richtext-lexical/src/field/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/LexicalMenu.tsx
+++ b/packages/richtext-lexical/src/field/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/LexicalMenu.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { LexicalCommand, LexicalEditor, TextNode } from 'lexical'
-import type { MutableRefObject, ReactPortal } from 'react'
+import type { JSX, MutableRefObject, ReactPortal } from 'react'

 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
 import { mergeRegister } from '@lexical/utils'
--- a/packages/richtext-lexical/src/field/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/index.tsx
+++ b/packages/richtext-lexical/src/field/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/index.tsx
@@ -16,7 +16,7 @@ import {
  COMMAND_PRIORITY_LOW,
  createCommand,
 } from 'lexical'
-import { useCallback, useEffect, useState } from 'react'
+import { type JSX, useCallback, useEffect, useState } from 'react'
 import * as React from 'react'

 import type { MenuTextMatch, TriggerFn } from '../useMenuTriggerMatch.js'
--- a/packages/richtext-lexical/src/field/lexical/plugins/handles/AddBlockHandlePlugin/index.tsx
+++ b/packages/richtext-lexical/src/field/lexical/plugins/handles/AddBlockHandlePlugin/index.tsx
@@ -4,7 +4,7 @@ import type { LexicalEditor, LexicalNode, ParagraphNode } from 'lexical'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
 import { $createParagraphNode } from 'lexical'
 import * as React from 'react'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { type JSX, useCallback, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'

 import { useEditorConfigContext } from '../../../config/client/EditorConfigProvider.js'
--- a/packages/richtext-lexical/src/field/lexical/plugins/handles/DraggableBlockPlugin/highlightElemOriginalPosition.ts
+++ b/packages/richtext-lexical/src/field/lexical/plugins/handles/DraggableBlockPlugin/highlightElemOriginalPosition.ts
@@ -3,7 +3,7 @@ import type React from 'react'
 import { getBoundingClientRectWithoutTransform } from './getBoundingRectWithoutTransform.js'

 export function highlightElemOriginalPosition(
-  debugHighlightRef: React.RefObject<HTMLDivElement>,
+  debugHighlightRef: React.RefObject<HTMLDivElement | null>,
  htmlElem: HTMLElement,
  anchorElem: HTMLElement,
 ) {
--- a/packages/richtext-lexical/src/field/lexical/plugins/handles/DraggableBlockPlugin/index.tsx
+++ b/packages/richtext-lexical/src/field/lexical/plugins/handles/DraggableBlockPlugin/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { LexicalEditor } from 'lexical'
-import type { DragEvent as ReactDragEvent } from 'react'
+import type { JSX, DragEvent as ReactDragEvent } from 'react'

 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
 import { eventFiles } from '@lexical/rich-text'
--- a/packages/richtext-lexical/src/field/lexical/plugins/handles/DraggableBlockPlugin/setTargetLine.ts
+++ b/packages/richtext-lexical/src/field/lexical/plugins/handles/DraggableBlockPlugin/setTargetLine.ts
@@ -20,7 +20,7 @@ export function setTargetLine(
  mouseY: number,
  anchorElem: HTMLElement,
  event: DragEvent,
-  debugHighlightRef: React.RefObject<HTMLDivElement>,
+  debugHighlightRef: React.RefObject<HTMLDivElement | null>,
  isFoundNodeEmptyParagraph: boolean = false,
 ) {
  const { height: targetBlockElemHeight, top: targetBlockElemTop } =
--- a/packages/richtext-lexical/src/field/lexical/ui/ContentEditable.tsx
+++ b/packages/richtext-lexical/src/field/lexical/ui/ContentEditable.tsx
@@ -1,3 +1,5 @@
+import type { JSX } from 'react'
+
 import { ContentEditable } from '@lexical/react/LexicalContentEditable.js'
 import * as React from 'react'

--- a/packages/richtext-lexical/tsconfig.json
+++ b/packages/richtext-lexical/tsconfig.json
@@ -6,7 +6,7 @@
    "emitDeclarationOnly": true,
    "outDir": "./dist" /* Specify an output folder for all emitted files. */,
    "rootDir": "./src" /* Specify the root folder within your source files. */,
-    "jsx": "react"
+    "jsx": "react-jsx"
  },
  "exclude": [
    "dist",
--- a/packages/richtext-slate/.swcrc
+++ b/packages/richtext-slate/.swcrc
@@ -7,6 +7,15 @@
      "syntax": "typescript",
      "tsx": true,
      "dts": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": true,
+        "development": false,
+        "useBuiltins": true
+      }
    }
  },
  "module": {
--- a/packages/richtext-slate/package.json
+++ b/packages/richtext-slate/package.json
@@ -44,14 +44,15 @@
    "@payloadcms/ui": "workspace:*",
    "@types/is-hotkey": "^0.1.10",
    "@types/node": "20.12.5",
-    "@types/react": "18.3.2",
+    "@types/react": "npm:types-react@19.0.0-beta.2",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2",
    "payload": "workspace:*"
  },
  "peerDependencies": {
    "@payloadcms/translations": "workspace:*",
    "@payloadcms/ui": "workspace:*",
    "payload": "workspace:*",
-    "react": "^18.0.0 || ^19.0.0"
+    "react": "^19.0.0 || ^19.0.0-rc-f994737d14-20240522"
  },
  "engines": {
    "node": ">=18.20.2"
@@ -67,5 +68,9 @@
    "main": "./dist/index.js",
    "registry": "https://registry.npmjs.org/",
    "types": "./dist/index.d.ts"
+  },
+  "overrides": {
+    "@types/react": "npm:types-react@19.0.0-beta.2",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2"
  }
 }
--- a/packages/richtext-slate/tsconfig.json
+++ b/packages/richtext-slate/tsconfig.json
@@ -6,7 +6,7 @@
    "emitDeclarationOnly": true,
    "outDir": "./dist" /* Specify an output folder for all emitted files. */,
    "rootDir": "./src" /* Specify the root folder within your source files. */,
-    "jsx": "react"
+    "jsx": "react-jsx"
  },
  "exclude": [
    "dist",
--- a/packages/storage-azure/.swcrc
+++ b/packages/storage-azure/.swcrc
@@ -7,6 +7,15 @@
      "syntax": "typescript",
      "tsx": true,
      "dts": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": true,
+        "development": false,
+        "useBuiltins": true
+      }
    }
  },
  "module": {
--- a/packages/translations/.swcrc
+++ b/packages/translations/.swcrc
@@ -7,6 +7,15 @@
      "syntax": "typescript",
      "tsx": true,
      "dts": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": true,
+        "development": false,
+        "useBuiltins": true
+      }
    }
  },
  "module": {
--- a/packages/translations/package.json
+++ b/packages/translations/package.json
@@ -37,7 +37,8 @@
  "devDependencies": {
    "@payloadcms/eslint-config": "workspace:*",
    "@swc/core": "^1.4.13",
-    "@types/react": "18.3.2",
+    "@types/react": "npm:types-react@19.0.0-beta.2",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2",
    "date-fns": "3.3.1",
    "dotenv": "8.6.0",
    "prettier": "^3.0.3",
@@ -63,5 +64,9 @@
    },
    "main": "./dist/exports/index.js",
    "types": "./dist/exports/index.d.ts"
+  },
+  "overrides": {
+    "@types/react": "npm:types-react@19.0.0-beta.2",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2"
  }
 }
--- a/packages/ui/.swcrc
+++ b/packages/ui/.swcrc
@@ -8,6 +8,15 @@
      "tsx": true,
      "dts": true
    },
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": true,
+        "development": false,
+        "useBuiltins": true
+      }
+    }
    "experimental": {
      "plugins": [
        [
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -108,9 +108,9 @@
    "object-to-formdata": "4.5.1",
    "qs": "6.11.2",
    "react-animate-height": "2.1.2",
-    "react-datepicker": "6.2.0",
+    "react-datepicker": "6.9.0",
    "react-image-crop": "10.1.8",
-    "react-select": "5.7.4",
+    "react-select": "5.8.0",
    "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.3.2",
-    "@types/react-datepicker": "4.11.2",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "npm:types-react@19.0.0-beta.2",
+    "@types/react-datepicker": "6.2.0",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2",
    "@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.68",
+    "next": "^15.0.0-rc.0",
    "payload": "workspace:*",
-    "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0"
+    "react": "^19.0.0 || ^19.0.0-rc-f994737d14-20240522",
+    "react-dom": "^19.0.0 || ^19.0.0-rc-f994737d14-20240522"
  },
  "engines": {
    "node": ">=18.20.2"
@@ -226,5 +226,9 @@
      },
      "./scss/app.scss": "./dist/scss/app.scss"
    }
+  },
+  "overrides": {
+    "@types/react": "npm:types-react@19.0.0-beta.2",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2"
  }
 }
--- a/packages/ui/src/elements/Button/index.tsx
+++ b/packages/ui/src/elements/Button/index.tsx
@@ -124,7 +124,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, Props>((

    case 'anchor':
      return (
-        <a {...buttonProps} href={url} ref={ref as React.LegacyRef<HTMLAnchorElement>}>
+        <a {...buttonProps} href={url} ref={ref as React.Ref<HTMLAnchorElement>}>
          <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>
            {children}
          </ButtonContents>
--- a/packages/ui/src/elements/DatePicker/DatePicker.tsx
+++ b/packages/ui/src/elements/DatePicker/DatePicker.tsx
@@ -76,6 +76,7 @@ const DateTime: React.FC<Props> = (props) => {
    monthsShown: Math.min(2, monthsToShow),
    onChange,
    placeholderText,
+    // @ts-expect-error // TODO Fix this - Broke with React 19 types
    popperPlacement: 'bottom-start',
    selected: value && new Date(value),
    showMonthYearPicker: pickerAppearance === 'monthOnly',
--- a/packages/ui/src/elements/EditUpload/index.tsx
+++ b/packages/ui/src/elements/EditUpload/index.tsx
@@ -85,9 +85,9 @@ export const EditUpload: React.FC<EditUploadProps> = ({
  const [originalHeight, setOriginalHeight] = useState<number>(0)
  const [originalWidth, setOriginalWidth] = useState<number>(0)

-  const focalWrapRef = useRef<HTMLDivElement | undefined>()
-  const imageRef = useRef<HTMLImageElement | undefined>()
-  const cropRef = useRef<HTMLDivElement | undefined>()
+  const focalWrapRef = useRef<HTMLDivElement | undefined>(undefined)
+  const imageRef = useRef<HTMLImageElement | undefined>(undefined)
+  const cropRef = useRef<HTMLDivElement | undefined>(undefined)

  const fineTuneCrop = ({ dimension, value }: { dimension: 'height' | 'width'; value: string }) => {
    const intValue = parseInt(value)
@@ -317,7 +317,7 @@ const DraggableElement = ({
 }) => {
  const [position, setPosition] = useState({ x: initialPosition.x, y: initialPosition.y })
  const [isDragging, setIsDragging] = useState(false)
-  const dragRef = useRef<HTMLButtonElement | undefined>()
+  const dragRef = useRef<HTMLButtonElement | undefined>(undefined)

  const getCoordinates = React.useCallback(
    (mouseXArg?: number, mouseYArg?: number, recenter?: boolean) => {
--- a/packages/ui/src/elements/FieldSelect/index.tsx
+++ b/packages/ui/src/elements/FieldSelect/index.tsx
@@ -1,6 +1,6 @@
 import type { FieldWithPath } from 'payload/types'

-import React, { Fragment, useState } from 'react'
+import React, { Fragment, type JSX, useState } from 'react'

 import type { FieldMap, MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js'

--- a/packages/ui/src/elements/Nav/context.tsx
+++ b/packages/ui/src/elements/Nav/context.tsx
@@ -7,7 +7,7 @@ import { usePreferences } from '../../providers/Preferences/index.js'

 type NavContextType = {
  navOpen: boolean
-  navRef: React.RefObject<HTMLDivElement>
+  navRef: React.RefObject<HTMLDivElement | null>
  setNavOpen: (value: boolean) => void
 }

--- a/packages/ui/src/elements/ReactSelect/ClearIndicator/index.tsx
+++ b/packages/ui/src/elements/ReactSelect/ClearIndicator/index.tsx
@@ -18,7 +18,8 @@ export const ClearIndicator: React.FC<ClearIndicatorProps<OptionType, true>> = (
  return (
    <div
      className={baseClass}
-      ref={ref}
+      // TODO Fix this - Broke with React 19 types
+      ref={typeof ref === 'string' ? null : ref}
      {...restInnerProps}
      onKeyDown={(e) => {
        if (e.key === 'Enter') {
--- a/packages/ui/src/elements/ReactSelect/Control/index.tsx
+++ b/packages/ui/src/elements/ReactSelect/Control/index.tsx
@@ -14,30 +14,33 @@ export const Control: React.FC<ControlProps<Option, any>> = (props) => {
  } = props

  return (
-    <SelectComponents.Control
-      {...props}
-      innerProps={{
-        ...innerProps,
-        onKeyDown: (e) => {
-          if (disableKeyDown) {
-            e.stopPropagation()
-            // Create event for keydown listeners which specifically want to bypass this stopPropagation
-            const bypassEvent = new CustomEvent('bypassKeyDown', { detail: e })
-            document.dispatchEvent(bypassEvent)
-          }
-        },
-        // react-select has this typed incorrectly so we disable the linting rule
-        // we need to prevent react-select from hijacking the 'onKeyDown' event while modals are open (i.e. the 'Relationship' field component)
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        onMouseDown: (e) => {
-          // we need to prevent react-select from hijacking the 'onMouseDown' event while modals are open (i.e. the 'Relationship' field component)
-          if (!disableMouseDown) {
-            innerProps.onMouseDown(e)
-          }
-        },
-      }}
-    >
-      {children}
-    </SelectComponents.Control>
+    <React.Fragment>
+      {/* @ts-expect-error // TODO Fix this - Broke with React 19 types */}
+      <SelectComponents.Control
+        {...props}
+        innerProps={{
+          ...innerProps,
+          onKeyDown: (e) => {
+            if (disableKeyDown) {
+              e.stopPropagation()
+              // Create event for keydown listeners which specifically want to bypass this stopPropagation
+              const bypassEvent = new CustomEvent('bypassKeyDown', { detail: e })
+              document.dispatchEvent(bypassEvent)
+            }
+          },
+          // react-select has this typed incorrectly so we disable the linting rule
+          // we need to prevent react-select from hijacking the 'onKeyDown' event while modals are open (i.e. the 'Relationship' field component)
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          onMouseDown: (e) => {
+            // we need to prevent react-select from hijacking the 'onMouseDown' event while modals are open (i.e. the 'Relationship' field component)
+            if (!disableMouseDown) {
+              innerProps.onMouseDown(e)
+            }
+          },
+        }}
+      >
+        {children}
+      </SelectComponents.Control>
+    </React.Fragment>
  )
 }
--- a/packages/ui/src/elements/ReactSelect/DropdownIndicator/index.tsx
+++ b/packages/ui/src/elements/ReactSelect/DropdownIndicator/index.tsx
@@ -1,7 +1,7 @@
 import type { DropdownIndicatorProps } from 'react-select'

 import { Chevron } from '@payloadcms/ui/icons/Chevron'
-import React from 'react'
+import React, { type JSX } from 'react'

 import type { Option as OptionType } from '../types.js'

--- a/packages/ui/src/elements/ReactSelect/MultiValue/index.tsx
+++ b/packages/ui/src/elements/ReactSelect/MultiValue/index.tsx
@@ -2,7 +2,6 @@ import type { MultiValueProps } from 'react-select'

 import React from 'react'
 import { components as SelectComponents } from 'react-select'
-import { v4 as uuid } from 'uuid'

 import type { Option } from '../types.js'

@@ -35,25 +34,28 @@ export const MultiValue: React.FC<MultiValueProps<Option>> = (props) => {
    .join(' ')

  return (
-    <SelectComponents.MultiValue
-      {...props}
-      className={classes}
-      innerProps={{
-        ...innerProps,
-        ...attributes,
-        ...listeners,
-        onMouseDown: (e) => {
-          if (!disableMouseDown) {
-            // we need to prevent the dropdown from opening when clicking on the drag handle, but not when a modal is open (i.e. the 'Relationship' field component)
-            e.stopPropagation()
-          }
-        },
-        ref: setNodeRef,
-        style: {
-          transform,
-          ...attributes?.style,
-        },
-      }}
-    />
+    <React.Fragment>
+      {/* @ts-expect-error // TODO Fix this - Broke with React 19 types */}
+      <SelectComponents.MultiValue
+        {...props}
+        className={classes}
+        innerProps={{
+          ...innerProps,
+          ...attributes,
+          ...listeners,
+          onMouseDown: (e) => {
+            if (!disableMouseDown) {
+              // we need to prevent the dropdown from opening when clicking on the drag handle, but not when a modal is open (i.e. the 'Relationship' field component)
+              e.stopPropagation()
+            }
+          },
+          ref: setNodeRef,
+          style: {
+            transform,
+            ...attributes?.style,
+          },
+        }}
+      />
+    </React.Fragment>
  )
 }
--- a/packages/ui/src/elements/ReactSelect/MultiValueLabel/index.tsx
+++ b/packages/ui/src/elements/ReactSelect/MultiValueLabel/index.tsx
@@ -15,6 +15,7 @@ export const MultiValueLabel: React.FC<MultiValueProps<Option>> = (props) => {

  return (
    <div className={baseClass}>
+      {/* @ts-expect-error // TODO Fix this - Broke with React 19 types */}
      <SelectComponents.MultiValueLabel
        {...props}
        innerProps={{
--- a/packages/ui/src/elements/ReactSelect/MultiValueRemove/index.tsx
+++ b/packages/ui/src/elements/ReactSelect/MultiValueRemove/index.tsx
@@ -1,6 +1,6 @@
 import type { MultiValueRemoveProps } from 'react-select'

-import React from 'react'
+import React, { type JSX } from 'react'

 import type { Option as OptionType } from '../types.js'

--- a/packages/ui/src/elements/ReactSelect/SingleValue/index.tsx
+++ b/packages/ui/src/elements/ReactSelect/SingleValue/index.tsx
@@ -11,11 +11,14 @@ export const SingleValue: React.FC<SingleValueProps<Option>> = (props) => {
  const { children, className } = props

  return (
-    <SelectComponents.SingleValue
-      {...props}
-      className={[baseClass, className].filter(Boolean).join(' ')}
-    >
-      {children}
-    </SelectComponents.SingleValue>
+    <React.Fragment>
+      {/* @ts-expect-error // TODO Fix this - Broke with React 19 types */}
+      <SelectComponents.SingleValue
+        {...props}
+        className={[baseClass, className].filter(Boolean).join(' ')}
+      >
+        {children}
+      </SelectComponents.SingleValue>
+    </React.Fragment>
  )
 }
--- a/packages/ui/src/elements/ReactSelect/ValueContainer/index.tsx
+++ b/packages/ui/src/elements/ReactSelect/ValueContainer/index.tsx
@@ -15,6 +15,7 @@ export const ValueContainer: React.FC<ValueContainerProps<Option, any>> = (props

  return (
    <div className={baseClass} ref={customProps?.droppableRef}>
+      {/* @ts-expect-error // TODO Fix this - Broke with React 19 types */}
      <SelectComponents.ValueContainer {...props} />
    </div>
  )
--- a/packages/ui/src/elements/ReactSelect/types.ts
+++ b/packages/ui/src/elements/ReactSelect/types.ts
@@ -6,7 +6,7 @@ type CustomSelectProps = {
  disableKeyDown?: boolean
  disableMouseDown?: boolean
  draggableProps?: any
-  droppableRef?: React.RefObject<HTMLDivElement>
+  droppableRef?: React.RefObject<HTMLDivElement | null>
  onSave?: DocumentDrawerProps['onSave']
  setDrawerIsOpen?: (isOpen: boolean) => void
 }
--- a/packages/ui/src/elements/Tooltip/index.tsx
+++ b/packages/ui/src/elements/Tooltip/index.tsx
@@ -6,7 +6,7 @@ import './index.scss'

 export type Props = {
  alignCaret?: 'center' | 'left' | 'right'
-  boundingRef?: React.RefObject<HTMLElement>
+  boundingRef?: React.RefObject<HTMLElement | null>
  children: React.ReactNode
  className?: string
  delay?: number
--- a/packages/ui/src/fields/Checkbox/Input.tsx
+++ b/packages/ui/src/fields/Checkbox/Input.tsx
@@ -14,7 +14,7 @@ export type CheckboxInputProps = {
  checked?: boolean
  className?: string
  id?: string
-  inputRef?: React.RefObject<HTMLInputElement>
+  inputRef?: React.RefObject<HTMLInputElement | null>
  label?: LabelProps['label']
  labelProps?: SanitizedLabelProps
  name?: string
--- a/packages/ui/src/fields/Relationship/AddNew/index.tsx
+++ b/packages/ui/src/fields/Relationship/AddNew/index.tsx
@@ -52,7 +52,7 @@ export const AddNewRelation: React.FC<Props> = ({
      if (operation === 'create') {
        const newValue: Value = Array.isArray(relationTo)
          ? {
-              relationTo: collectionConfig.slug,
+              relationTo: collectionConfig?.slug,
              value: doc.id,
            }
          : doc.id
@@ -95,11 +95,11 @@ export const AddNewRelation: React.FC<Props> = ({
  useEffect(() => {
    if (permissions) {
      if (relatedCollections.length === 1) {
-        setShow(permissions.collections[relatedCollections[0].slug].create.permission)
+        setShow(permissions.collections[relatedCollections[0]?.slug]?.create?.permission)
      } else {
        setShow(
          relatedCollections.some(
-            (collection) => permissions.collections[collection.slug].create.permission,
+            (collection) => permissions.collections[collection?.slug]?.create?.permission,
          ),
        )
      }
@@ -109,7 +109,7 @@ export const AddNewRelation: React.FC<Props> = ({
  useEffect(() => {
    if (relatedToMany && selectedCollection) {
      setCollectionConfig(
-        relatedCollections.find((collection) => collection.slug === selectedCollection),
+        relatedCollections.find((collection) => collection?.slug === selectedCollection),
      )
    }
  }, [selectedCollection, relatedToMany, relatedCollections])
@@ -168,17 +168,17 @@ export const AddNewRelation: React.FC<Props> = ({
              render={({ close: closePopup }) => (
                <PopupList.ButtonGroup>
                  {relatedCollections.map((relatedCollection) => {
-                    if (permissions.collections[relatedCollection.slug].create.permission) {
+                    if (permissions.collections[relatedCollection?.slug].create.permission) {
                      return (
                        <PopupList.Button
-                          className={`${baseClass}__relation-button--${relatedCollection.slug}`}
-                          key={relatedCollection.slug}
+                          className={`${baseClass}__relation-button--${relatedCollection?.slug}`}
+                          key={relatedCollection?.slug}
                          onClick={() => {
                            closePopup()
-                            setSelectedCollection(relatedCollection.slug)
+                            setSelectedCollection(relatedCollection?.slug)
                          }}
                        >
-                          {getTranslation(relatedCollection.labels.singular, i18n)}
+                          {getTranslation(relatedCollection?.labels?.singular, i18n)}
                        </PopupList.Button>
                      )
                    }
@@ -190,7 +190,7 @@ export const AddNewRelation: React.FC<Props> = ({
              size="medium"
            />
            {collectionConfig &&
-              permissions.collections[collectionConfig.slug].create.permission && (
+              permissions.collections[collectionConfig?.slug]?.create?.permission && (
                <DocumentDrawer onSave={onSave} />
              )}
          </Fragment>
--- a/packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.tsx
+++ b/packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.tsx
@@ -47,6 +47,7 @@ export const MultiValueLabel: React.FC<MultiValueProps<Option>> = (props) => {
  return (
    <div className={baseClass}>
      <div className={`${baseClass}__content`}>
+        {/* @ts-expect-error // TODO Fix this - Broke with React 19 types */}
        <components.MultiValueLabel
          {...props}
          innerProps={{
--- a/packages/ui/src/fields/Relationship/select-components/SingleValue/index.tsx
+++ b/packages/ui/src/fields/Relationship/select-components/SingleValue/index.tsx
@@ -40,36 +40,39 @@ export const SingleValue: React.FC<SingleValueProps<Option>> = (props) => {
  }, [isDrawerOpen, setDrawerIsOpen])

  return (
-    <SelectComponents.SingleValue {...props} className={baseClass}>
-      <div className={`${baseClass}__label`}>
-        <div className={`${baseClass}__label-text`}>
-          <div className={`${baseClass}__text`}>{children}</div>
-          {relationTo && hasReadPermission && (
-            <Fragment>
-              <DocumentDrawerToggler
-                aria-label={t('general:editLabel', { label })}
-                className={`${baseClass}__drawer-toggler`}
-                onClick={() => setShowTooltip(false)}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter') {
-                    e.stopPropagation()
-                  }
-                }}
-                onMouseDown={(e) => e.stopPropagation()} // prevents react-select dropdown from opening
-                onMouseEnter={() => setShowTooltip(true)}
-                onMouseLeave={() => setShowTooltip(false)}
-                onTouchEnd={(e) => e.stopPropagation()} // prevents react-select dropdown from opening
-              >
-                <Tooltip className={`${baseClass}__tooltip`} show={showTooltip}>
-                  {t('general:edit')}
-                </Tooltip>
-                <Edit />
-              </DocumentDrawerToggler>
-            </Fragment>
-          )}
+    <React.Fragment>
+      {/* @ts-expect-error // TODO Fix this - Broke with React 19 types */}
+      <SelectComponents.SingleValue {...props} className={baseClass}>
+        <div className={`${baseClass}__label`}>
+          <div className={`${baseClass}__label-text`}>
+            <div className={`${baseClass}__text`}>{children}</div>
+            {relationTo && hasReadPermission && (
+              <Fragment>
+                <DocumentDrawerToggler
+                  aria-label={t('general:editLabel', { label })}
+                  className={`${baseClass}__drawer-toggler`}
+                  onClick={() => setShowTooltip(false)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      e.stopPropagation()
+                    }
+                  }}
+                  onMouseDown={(e) => e.stopPropagation()} // prevents react-select dropdown from opening
+                  onMouseEnter={() => setShowTooltip(true)}
+                  onMouseLeave={() => setShowTooltip(false)}
+                  onTouchEnd={(e) => e.stopPropagation()} // prevents react-select dropdown from opening
+                >
+                  <Tooltip className={`${baseClass}__tooltip`} show={showTooltip}>
+                    {t('general:edit')}
+                  </Tooltip>
+                  <Edit />
+                </DocumentDrawerToggler>
+              </Fragment>
+            )}
+          </div>
        </div>
-      </div>
-      {relationTo && hasReadPermission && <DocumentDrawer onSave={onSave} />}
-    </SelectComponents.SingleValue>
+        {relationTo && hasReadPermission && <DocumentDrawer onSave={onSave} />}
+      </SelectComponents.SingleValue>
+    </React.Fragment>
  )
 }
--- a/packages/ui/src/hooks/useDebouncedCallback.ts
+++ b/packages/ui/src/hooks/useDebouncedCallback.ts
@@ -9,7 +9,7 @@ import { useCallback, useRef } from 'react'
 export const useDebouncedCallback = (func, wait) => {
  // Use a ref to store the timeout between renders
  // and prevent changes to it from causing re-renders
-  const timeout = useRef<ReturnType<typeof setTimeout>>()
+  const timeout = useRef<ReturnType<typeof setTimeout>>(undefined)

  return useCallback(
    (...args) => {
--- a/packages/ui/src/hooks/useDelay.ts
+++ b/packages/ui/src/hooks/useDelay.ts
@@ -3,7 +3,7 @@ import * as React from 'react'
 type Result = [boolean, () => void]
 export const useDelay = (delay: number, triggerOnMount = false): Result => {
  const [hasDelayed, setHasDelayed] = React.useState(false)
-  const triggerTimeoutRef = React.useRef<NodeJS.Timeout>()
+  const triggerTimeoutRef = React.useRef<NodeJS.Timeout>(undefined)

  const triggerDelay = React.useCallback(() => {
    setHasDelayed(false)
--- a/packages/ui/src/hooks/useDelayedRender.ts
+++ b/packages/ui/src/hooks/useDelayedRender.ts
@@ -36,7 +36,8 @@ export const useDelayedRender: useDelayedRenderT = ({
  const [isMounted, setIsMounted] = React.useState(false)
  const [isUnmounting, setIsUnmounting] = React.useState(false)
  const onMountTimestampRef = React.useRef(0)
-  const unmountTimeoutRef: React.MutableRefObject<NodeJS.Timeout | undefined> = React.useRef()
+  const unmountTimeoutRef: React.MutableRefObject<NodeJS.Timeout | undefined> =
+    React.useRef(undefined)

  const unmount = React.useCallback(() => {
    setIsUnmounting(true)
--- a/packages/ui/src/providers/DocumentInfo/index.tsx
+++ b/packages/ui/src/providers/DocumentInfo/index.tsx
@@ -404,7 +404,6 @@ export const DocumentInfoProvider: React.FC<
          setIsLoading(false)
        }
      }
-
      setIsLoading(false)
    }

@@ -413,17 +412,7 @@ export const DocumentInfoProvider: React.FC<
    return () => {
      abortController.abort()
    }
-  }, [
-    api,
-    operation,
-    collectionSlug,
-    serverURL,
-    id,
-    getPreference,
-    globalSlug,
-    locale,
-    onLoadError,
-  ])
+  }, [api, operation, collectionSlug, serverURL, id, globalSlug, locale, onLoadError])

  useEffect(() => {
    void getVersions()
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/templates/blank-3.0/package.json
+++ b/templates/blank-3.0/package.json
@@ -20,20 +20,30 @@
    "@payloadcms/richtext-lexical": "beta",
    "cross-env": "^7.0.3",
    "graphql": "^16.8.1",
-    "next": "14.3.0-canary.68",
+    "next": "15.0.0-rc.0",
    "payload": "beta",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0-rc-f994737d14-20240522",
+    "react-dom": "^19.0.0-rc-f994737d14-20240522",
    "sharp": "0.32.6"
  },
  "devDependencies": {
    "@types/node": "^20.12.12",
-    "@types/react": "^18.3.2",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "npm:types-react@19.0.0-beta.2",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2",
    "dotenv": "^16.4.5",
    "typescript": "^5.4.5"
  },
  "engines": {
    "node": "^18.20.2 || >=20.6.0"
+  },
+  "pnpm": {
+    "overrides": {
+      "@types/react": "npm:types-react@19.0.0-beta.2",
+      "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2"
+    }
+  },
+  "overrides": {
+    "@types/react": "npm:types-react@19.0.0-beta.2",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2"
  }
 }
--- a/templates/blank-3.0/yarn.lock
+++ b/templates/blank-3.0/yarn.lock
--- a/test/.swcrc
+++ b/test/.swcrc
@@ -7,7 +7,7 @@
      "syntax": "typescript",
      "tsx": true,
      "dts": true
-    }
+    },
  },
  "module": {
    "type": "es6"
--- a/test/next.config.mjs
+++ b/test/next.config.mjs
@@ -1,34 +0,0 @@
-import bundleAnalyzer from '@next/bundle-analyzer'
-
-import { withPayload } from '@payloadcms/next'
-
-const withBundleAnalyzer = bundleAnalyzer({
-  enabled: process.env.ANALYZE === 'true',
-})
-
-// eslint-disable-next-line no-restricted-exports
-export default withBundleAnalyzer(
-  withPayload({
-    reactStrictMode: false,
-    async redirects() {
-      return [
-        {
-          destination: '/admin',
-          permanent: true,
-          source: '/',
-        },
-      ]
-    },
-    images: {
-      domains: ['localhost'],
-    },
-    webpack: (webpackConfig) => {
-      webpackConfig.resolve.extensionAlias = {
-        '.cjs': ['.cts', '.cjs'],
-        '.js': ['.ts', '.tsx', '.js', '.jsx'],
-        '.mjs': ['.mts', '.mjs'],
-      }
-      return webpackConfig
-    },
-  }),
-)
--- a/test/package.json
+++ b/test/package.json
@@ -40,6 +40,9 @@
    "@payloadcms/storage-vercel-blob": "workspace:*",
    "@payloadcms/translations": "workspace:*",
    "@payloadcms/ui": "workspace:*",
+    "@types/react": "npm:types-react@19.0.0-beta.2",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2",
+    "babel-plugin-react-compiler": "0.0.0-experimental-592953e-20240517",
    "comment-json": "^4.2.3",
    "create-payload-app": "workspace:*",
    "dotenv": "8.6.0",
@@ -53,5 +56,9 @@
    "ts-essentials": "7.0.3",
    "typescript": "5.4.5",
    "uploadthing": "^6.10.1"
+  },
+  "overrides": {
+    "@types/react": "npm:types-react@19.0.0-beta.2",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2"
  }
 }