feat!: upgrade minimum react, react-dom, @types/react and @types/react-dom versions to match exactly what Next.js is using, various dependency cleanup (#7106)

**BREAKING:**
- Upgrades minimum supported @types/react version from
npm:types-react@19.0.0-beta.2 to npm:types-react@19.0.0-rc.0
- Upgrades minimum supported @types/react-dom version from
npm:types-react-dom@19.0.0-beta.2 to npm:types-react-dom@19.0.0-rc.0
- Upgrades minimum supported react and react-dom version from
19.0.0-rc-f994737d14-20240522 to 19.0.0-rc-6230622a1a-20240610

Author: AlessioGr

jest.config.js

@@ -1,4 +1,5 @@
-/** @type {import('jest').Config} */ const baseJestConfig = {
+/** @type {import('jest').Config}  */
+const baseJestConfig = {
   extensionsToTreatAsEsm: ['.ts', '.tsx'],
   setupFiles: ['<rootDir>/test/jest.setup.env.js'],
   setupFilesAfterEnv: ['<rootDir>/test/jest.setup.js'],

package.json

@@ -46,9 +46,9 @@
     "build:translations": "turbo build --filter translations",
     "build:ui": "turbo build --filter ui",
     "clean": "turbo clean",
-    "clean:all": "node ./scripts/delete-recursively.js '@node_modules' 'media' '**/dist' '**/.cache' '**/.next' '**/.turbo' '**/tsconfig.tsbuildinfo' '**/payload*.tgz' '**/meta_*.json'",
-    "clean:build": "node ./scripts/delete-recursively.js 'media' '**/dist' '**/.cache' '**/.next' '**/.turbo' '**/tsconfig.tsbuildinfo' '**/payload*.tgz' '**/meta_*.json'",
-    "clean:cache": "node ./scripts/delete-recursively.js node_modules/.cache! packages/payload/node_modules/.cache! .next",
+    "clean:all": "node ./scripts/delete-recursively.js '@node_modules' 'media/*' '**/dist/' '**/.cache/*' '**/.next/*' '**/.turbo/*' '**/tsconfig.tsbuildinfo' '**/payload*.tgz' '**/meta_*.json'",
+    "clean:build": "node ./scripts/delete-recursively.js 'media/' '**/dist/' '**/.cache/' '**/.next/' '**/.turbo/' '**/tsconfig.tsbuildinfo' '**/payload*.tgz' '**/meta_*.json'",
+    "clean:cache": "node ./scripts/delete-recursively.js node_modules/.cache! packages/payload/node_modules/.cache! .next/*",
     "dev": "cross-env NODE_OPTIONS=--no-deprecation node ./test/dev.js",
     "dev:generate-graphql-schema": "cross-env NODE_OPTIONS=--no-deprecation tsx ./test/generateGraphQLSchema.ts",
     "dev:generate-types": "cross-env NODE_OPTIONS=--no-deprecation tsx ./test/generateTypes.ts",
@@ -91,7 +91,7 @@
   },
   "devDependencies": {
     "@jest/globals": "29.7.0",
-    "@next/bundle-analyzer": "^14.1.0",
+    "@next/bundle-analyzer": "15.0.0-canary.53",
     "@payloadcms/eslint-config": "workspace:*",
     "@payloadcms/eslint-plugin": "workspace:*",
     "@payloadcms/live-preview-react": "workspace:*",
@@ -103,8 +103,8 @@
     "@types/minimist": "1.2.5",
     "@types/node": "20.12.5",
     "@types/prompts": "^2.4.5",
-    "@types/react": "npm:types-react@19.0.0-beta.2",
-    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2",
+    "@types/react": "npm:types-react@19.0.0-rc.0",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.0",
     "@types/semver": "^7.5.3",
     "@types/shelljs": "0.8.15",
     "chalk": "^4.1.2",
@@ -120,43 +120,37 @@
     "execa": "5.1.1",
     "form-data": "3.0.1",
     "fs-extra": "10.1.0",
-    "glob": "8.1.0",
     "globby": "11.1.0",
     "husky": "9.0.11",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    "json-schema-to-typescript": "11.0.3",
     "lint-staged": "15.2.7",
     "minimist": "1.2.8",
     "mongodb-memory-server": "^9.0",
     "next": "15.0.0-canary.53",
     "open": "^10.1.0",
     "p-limit": "^5.0.0",
-    "pino": "8.15.0",
-    "pino-pretty": "10.2.0",
     "playwright": "1.43.0",
     "playwright-core": "1.43.0",
     "prettier": "3.3.2",
     "prompts": "2.4.2",
-    "react": "^19.0.0-rc-f994737d14-20240522",
-    "react-dom": "^19.0.0-rc-f994737d14-20240522",
+    "react": "^19.0.0-rc-6230622a1a-20240610",
+    "react-dom": "^19.0.0-rc-6230622a1a-20240610",
     "rimraf": "3.0.2",
     "semver": "^7.5.4",
     "sharp": "0.32.6",
     "shelljs": "0.8.5",
     "slash": "3.0.0",
     "sort-package-json": "^2.10.0",
-    "swc-plugin-transform-remove-imports": "^1.12.1",
-    "tempy": "^1.0.1",
-    "ts-node": "10.9.1",
-    "tsx": "^4.7.1",
+    "swc-plugin-transform-remove-imports": "1.14.0",
+    "tempy": "1.0.1",
+    "tsx": "4.16.2",
     "turbo": "^1.13.3",
-    "typescript": "5.5.3",
-    "uuid": "10.0.0"
+    "typescript": "5.5.3"
   },
   "peerDependencies": {
-    "react": "^19.0.0 || ^19.0.0-rc-f994737d14-20240522",
-    "react-dom": "^19.0.0 || ^19.0.0-rc-f994737d14-20240522"
+    "react": "^19.0.0 || ^19.0.0-rc-6230622a1a-20240610",
+    "react-dom": "^19.0.0 || ^19.0.0-rc-6230622a1a-20240610"
   },
   "engines": {
     "node": "^18.20.2 || >=20.9.0",
@@ -168,8 +162,8 @@
       "domexception": "4"
     },
     "overrides": {
-      "@types/react": "npm:types-react@19.0.0-beta.2",
-      "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2",
+      "@types/react": "npm:types-react@19.0.0-rc.0",
+      "@types/react-dom": "npm:types-react-dom@19.0.0-rc.0",
       "copyfiles": "$copyfiles",
       "cross-env": "$cross-env",
       "dotenv": "$dotenv",
@@ -185,8 +179,8 @@
     }
   },
   "overrides": {
-    "@types/react": "npm:types-react@19.0.0-beta.2",
-    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2"
+    "@types/react": "npm:types-react@19.0.0-rc.0",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.0"
   },
   "workspaces:": [
     "packages/*",

packages/db-postgres/package.json

@@ -58,7 +58,7 @@
     "@payloadcms/eslint-config": "workspace:*",
     "@types/pg": "8.10.2",
     "@types/to-snake-case": "1.0.0",
-    "esbuild": "^0.21.4",
+    "esbuild": "0.23.0",
     "payload": "workspace:*"
   },
   "peerDependencies": {

packages/live-preview-react/package.json

@@ -36,13 +36,13 @@
   },
   "devDependencies": {
     "@payloadcms/eslint-config": "workspace:*",
-    "@types/react": "npm:types-react@19.0.0-beta.2",
-    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2",
+    "@types/react": "npm:types-react@19.0.0-rc.0",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.0",
     "payload": "workspace:*"
   },
   "peerDependencies": {
-    "react": "^19.0.0 || ^19.0.0-rc-f994737d14-20240522",
-    "react-dom": "^19.0.0 || ^19.0.0-rc-f994737d14-20240522"
+    "react": "^19.0.0 || ^19.0.0-rc-6230622a1a-20240610",
+    "react-dom": "^19.0.0 || ^19.0.0-rc-6230622a1a-20240610"
   },
   "publishConfig": {
     "exports": {
@@ -57,7 +57,7 @@
     "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"
+    "@types/react": "npm:types-react@19.0.0-rc.0",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.0"
   }
 }

packages/next/bundleScss.js

@@ -0,0 +1,45 @@
+import * as esbuild from 'esbuild'
+import fs from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url'
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
+import { sassPlugin } from 'esbuild-sass-plugin'
+
+// Bundle only the .scss files into a single css file
+await esbuild
+  .build({
+    entryPoints: ['src/esbuildEntry.ts'],
+    bundle: true,
+    minify: true,
+    outdir: 'dist/prod',
+    packages: 'external',
+    plugins: [sassPlugin({ css: 'external' })],
+  })
+  .then(() => {
+    fs.rename('dist/prod/esbuildEntry.css', 'dist/prod/styles.css', (err) => {
+      if (err) console.error(`Error while renaming index.css: ${err}`)
+    })
+
+    fs.unlink('dist/esbuildEntry.js', (err) => {
+      if (err) console.error(`Error while deleting dist/esbuildEntry.js: ${err}`)
+    })
+
+    fs.unlink('dist/prod/esbuildEntry.js', (err) => {
+      if (err) console.error(`Error while deleting dist/prod/esbuildEntry.js: ${err}`)
+    })
+
+    fs.unlink('dist/esbuildEntry.d.ts', (err) => {
+      if (err) console.error(`Error while deleting dist/esbuildEntry.d.ts: ${err}`)
+    })
+    fs.unlink('dist/esbuildEntry.d.ts.map', (err) => {
+      if (err) console.error(`Error while deleting dist/esbuildEntry.d.ts.map: ${err}`)
+    })
+    fs.unlink('dist/esbuildEntry.js.map', (err) => {
+      if (err) console.error(`Error while deleting dist/esbuildEntry.js.map: ${err}`)
+    })
+    console.log('styles.css bundled successfully')
+  })
+  .catch((e) => {
+    throw e
+  })

packages/next/package.json

@@ -50,11 +50,11 @@
     "dist"
   ],
   "scripts": {
-    "build": "rm -rf dist && rm -rf tsconfig.tsbuildinfo && pnpm copyfiles && pnpm build:types && pnpm build:swc && pnpm build:cjs && pnpm build:webpack",
+    "build": "rm -rf dist && rm -rf tsconfig.tsbuildinfo && pnpm copyfiles && pnpm build:types && pnpm build:swc && pnpm build:cjs && pnpm build:esbuild",
     "build:cjs": "swc ./src/withPayload.js -o ./dist/cjs/withPayload.cjs --config-file .swcrc-cjs --strip-leading-paths",
+    "build:esbuild": "node bundleScss.js",
     "build:swc": "swc ./src -d ./dist --config-file .swcrc --strip-leading-paths",
     "build:types": "tsc --emitDeclarationOnly --outDir dist",
-    "build:webpack": "webpack --config webpack.config.js",
     "clean": "rimraf {dist,*.tsbuildinfo}",
     "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" \"src/app/api/**\" dist/",
     "fix": "eslint \"src/**/*.{ts,tsx}\" --fix",
@@ -76,27 +76,21 @@
     "react-diff-viewer-continued": "3.2.6",
     "sass": "1.77.4",
     "sonner": "^1.5.0",
+    "uuid": "10.0.0",
     "ws": "^8.16.0"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.1.0",
     "@payloadcms/eslint-config": "workspace:*",
     "@types/busboy": "^1.5.3",
-    "@types/react": "npm:types-react@19.0.0-beta.2",
-    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2",
+    "@types/react": "npm:types-react@19.0.0-rc.0",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.0",
+    "@types/uuid": "10.0.0",
     "@types/ws": "^8.5.10",
-    "css-loader": "^6.10.0",
-    "css-minimizer-webpack-plugin": "^6.0.0",
-    "mini-css-extract-plugin": "1.6.2",
+    "esbuild": "0.23.0",
+    "esbuild-sass-plugin": "3.3.1",
     "payload": "workspace:*",
-    "postcss-loader": "^8.1.1",
-    "postcss-preset-env": "^9.5.14",
-    "sass-loader": "14.2.1",
-    "swc-loader": "^0.2.6",
-    "swc-plugin-transform-remove-imports": "^1.12.1",
-    "terser-webpack-plugin": "^5.3.10",
-    "webpack": "^5.78.0",
-    "webpack-cli": "^5.1.4"
+    "swc-plugin-transform-remove-imports": "1.14.0"
   },
   "peerDependencies": {
     "graphql": "^16.8.1",
@@ -148,7 +142,7 @@
     "types": "./dist/index.js"
   },
   "overrides": {
-    "@types/react": "npm:types-react@19.0.0-beta.2",
-    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2"
+    "@types/react": "npm:types-react@19.0.0-rc.0",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.0"
   }
 }

packages/next/src/webpackEntry.ts renamed to packages/next/src/esbuildEntry.ts

@@ -128,13 +128,13 @@
     "@types/uuid": "10.0.0",
     "copyfiles": "2.4.1",
     "cross-env": "7.0.3",
-    "esbuild": "^0.21.4",
+    "esbuild": "0.23.0",
     "graphql-http": "^1.22.0",
     "rimraf": "3.0.2",
     "sharp": "0.32.6"
   },
   "peerDependencies": {
-    "@swc/core": "^1.6.1",
+    "@swc/core": "^1.6.13",
     "graphql": "^16.8.1"
   },
   "peerDependenciesMeta": {