feat: match next.js env file loading behavior in bin scripts & importConfig, clean up installed packages & mismatching package versions (#6601)

2024-06-03 17:23:05 -04:00
parent 1aece399f7
commit 59cde0dbb3
33 changed files with 503 additions and 939 deletions
--- a/nodemon.json
+++ b/nodemon.json
@@ -1,15 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/nodemon.json",
-  "exec": "ts-node ./test/dev.ts -- -I",
-  "ext": "ts,js,json",
-  "ignore": [
-    ".git",
-    "node_modules",
-    "node_modules/**/node_modules",
-    "packages/payload/src/admin",
-    "packages/payload/src/**/*.spec.ts",
-    "test/**/payload-types.ts"
-  ],
-  "watch": ["./test/", "./packages/**/*.ts"],
-  "stdin": false
-}
--- a/package.json
+++ b/package.json
@@ -65,13 +65,13 @@
    "script:pack": "tsx scripts/pack-all-to-dest.ts",
    "pretest": "pnpm build",
    "test": "pnpm test:int && pnpm test:components && pnpm test:e2e",
-    "test:components": "cross-env NODE_OPTIONS=--no-deprecation jest --config=jest.components.config.js",
+    "test:components": "cross-env NODE_OPTIONS=\"--experimental-vm-modules --no-deprecation\" jest --config=jest.components.config.js",
    "test:e2e": "cross-env NODE_OPTIONS=--no-deprecation NODE_NO_WARNINGS=1 tsx ./test/runE2E.ts",
    "test:e2e:debug": "cross-env NODE_OPTIONS=--no-deprecation NODE_NO_WARNINGS=1 PWDEBUG=1 DISABLE_LOGGING=true playwright test",
    "test:e2e:headed": "cross-env NODE_OPTIONS=--no-deprecation NODE_NO_WARNINGS=1 DISABLE_LOGGING=true playwright test --headed",
-    "test:int": "cross-env NODE_OPTIONS=--no-deprecation NODE_NO_WARNINGS=1 DISABLE_LOGGING=true jest --forceExit --detectOpenHandles --config=test/jest.config.js --runInBand",
-    "test:int:postgres": "cross-env NODE_OPTIONS=--no-deprecation NODE_NO_WARNINGS=1 PAYLOAD_DATABASE=postgres DISABLE_LOGGING=true jest --forceExit --detectOpenHandles --config=test/jest.config.js --runInBand",
-    "test:unit": "cross-env NODE_OPTIONS=--no-deprecation NODE_NO_WARNINGS=1 DISABLE_LOGGING=true jest --forceExit --detectOpenHandles  --config=jest.config.js --runInBand",
+    "test:int": "cross-env NODE_OPTIONS=\"--experimental-vm-modules --no-deprecation\" NODE_NO_WARNINGS=1 DISABLE_LOGGING=true jest --forceExit --detectOpenHandles --config=test/jest.config.js --runInBand",
+    "test:int:postgres": "cross-env NODE_OPTIONS=\"--experimental-vm-modules --no-deprecation\" NODE_NO_WARNINGS=1 PAYLOAD_DATABASE=postgres DISABLE_LOGGING=true jest --forceExit --detectOpenHandles --config=test/jest.config.js --runInBand",
+    "test:unit": "cross-env NODE_OPTIONS=\"--experimental-vm-modules --no-deprecation\" NODE_NO_WARNINGS=1 DISABLE_LOGGING=true jest --forceExit --detectOpenHandles  --config=jest.config.js --runInBand",
    "translateNewKeys": "pnpm --filter payload run translateNewKeys"
  },
  "lint-staged": {
@@ -84,18 +84,15 @@
    "tsconfig.json": "node scripts/reset-tsconfig.js"
  },
  "devDependencies": {
-    "@aws-sdk/client-s3": "^3.525.0",
+    "@jest/globals": "29.7.0",
    "@next/bundle-analyzer": "^14.1.0",
-    "@octokit/core": "^5.1.0",
    "@payloadcms/eslint-config": "workspace:*",
    "@payloadcms/live-preview-react": "workspace:*",
    "@playwright/test": "1.43.0",
-    "@sentry/react": "^7.77.0",
    "@swc/cli": "^0.1.62",
    "@swc/jest": "0.2.36",
    "@testing-library/jest-dom": "6.4.2",
    "@testing-library/react": "14.2.1",
-    "@types/concat-stream": "^2.0.1",
    "@types/fs-extra": "^11.0.2",
    "@types/jest": "29.5.12",
    "@types/minimist": "1.2.5",
@@ -106,14 +103,12 @@
    "@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",
    "chalk": "^4.1.2",
    "changelogen": "^0.5.5",
    "comment-json": "^4.2.3",
-    "concat-stream": "^2.0.0",
    "copyfiles": "2.4.1",
    "cross-env": "7.0.3",
-    "dotenv": "8.6.0",
+    "dotenv": "16.4.5",
    "drizzle-kit": "0.20.14-1f2c838",
    "drizzle-orm": "0.29.4",
    "escape-html": "^1.0.3",
@@ -121,20 +116,15 @@
    "execa": "5.1.1",
    "form-data": "3.0.1",
    "fs-extra": "10.1.0",
-    "get-port": "5.1.1",
-    "get-stream": "6.0.1",
    "glob": "8.1.0",
    "globby": "11.1.0",
    "husky": "^8.0.3",
    "jest": "29.7.0",
    "jest-environment-jsdom": "29.7.0",
-    "jwt-decode": "4.0.0",
    "lint-staged": "^14.0.1",
    "minimist": "1.2.8",
    "mongodb-memory-server": "^9.0",
    "next": "15.0.0-rc.0",
-    "node-mocks-http": "^1.14.1",
-    "nodemon": "3.0.3",
    "open": "^10.1.0",
    "p-limit": "^5.0.0",
    "pino": "8.15.0",
@@ -146,14 +136,11 @@
    "qs": "6.11.2",
    "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",
    "sharp": "0.32.6",
    "shelljs": "0.8.5",
-    "simple-git": "^3.24.0",
    "slash": "3.0.0",
-    "slate": "0.91.4",
    "sort-package-json": "^2.10.0",
    "swc-plugin-transform-remove-imports": "^1.12.1",
    "tempfile": "^3.0.0",
@@ -162,8 +149,7 @@
    "tsx": "^4.7.1",
    "turbo": "^1.13.3",
    "typescript": "5.4.5",
-    "uuid": "^9.0.1",
-    "yocto-queue": "^1.0.0"
+    "uuid": "^9.0.1"
  },
  "peerDependencies": {
    "react": "^19.0.0 || ^19.0.0-rc-f994737d14-20240522",
--- a/packages/create-payload-app/package.json
+++ b/packages/create-payload-app/package.json
@@ -51,7 +51,7 @@
    "@types/degit": "^2.8.3",
    "@types/esprima": "^4.0.6",
    "@types/fs-extra": "^9.0.12",
-    "@types/jest": "^27.0.3",
+    "@types/jest": "29.5.12",
    "@types/node": "20.12.5",
    "temp-dir": "2.0.0"
  }
--- a/packages/create-payload-app/src/lib/create-project.spec.ts
+++ b/packages/create-payload-app/src/lib/create-project.spec.ts
@@ -5,6 +5,7 @@ import { createProject } from './create-project.js'
 import { dbReplacements } from './packages.js'
 import { getValidTemplates } from './templates.js'
 import globby from 'globby'
+import { jest } from '@jest/globals'

 import tempDirectory from 'temp-dir'

--- a/packages/create-payload-app/src/lib/wrap-next-config.spec.ts
+++ b/packages/create-payload-app/src/lib/wrap-next-config.spec.ts
@@ -1,5 +1,6 @@
 import { parseAndModifyConfigContent, withPayloadStatement } from './wrap-next-config.js'
 import * as p from '@clack/prompts'
+import { jest } from '@jest/globals'

 const esmConfigs = {
  defaultNextConfig: `/** @type {import('next').NextConfig} */
--- a/packages/db-mongodb/package.json
+++ b/packages/db-mongodb/package.json
@@ -35,12 +35,11 @@
  "dependencies": {
    "bson-objectid": "2.0.4",
    "deepmerge": "4.3.1",
-    "get-port": "5.1.1",
    "http-status": "1.6.2",
    "mongoose": "6.12.3",
    "mongoose-paginate-v2": "1.7.22",
    "prompts": "2.4.2",
-    "uuid": "9.0.0"
+    "uuid": "^9.0.1"
  },
  "devDependencies": {
    "@payloadcms/eslint-config": "workspace:*",
--- a/packages/db-postgres/package.json
+++ b/packages/db-postgres/package.json
@@ -50,7 +50,7 @@
    "pg": "8.11.3",
    "prompts": "2.4.2",
    "to-snake-case": "1.0.0",
-    "uuid": "9.0.0"
+    "uuid": "^9.0.1"
  },
  "devDependencies": {
    "@payloadcms/eslint-config": "workspace:*",
--- a/packages/email-resend/src/email-resend.spec.ts
+++ b/packages/email-resend/src/email-resend.spec.ts
@@ -1,5 +1,6 @@
 import { resendAdapter } from './index.js'
 import { Payload } from 'payload/types'
+import { jest } from '@jest/globals'

 describe('email-resend', () => {
  const defaultFromAddress = 'dev@payloadcms.com'
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -46,9 +46,7 @@
    "@payloadcms/graphql": "workspace:*",
    "@payloadcms/translations": "workspace:*",
    "@payloadcms/ui": "workspace:*",
-    "@types/busboy": "^1.5.3",
    "busboy": "^1.6.0",
-    "deep-equal": "2.2.2",
    "file-type": "19.0.0 || 19.0.0-rc-f994737d14-20240522",
    "graphql-http": "^1.22.0",
    "graphql-playground-html": "1.6.30",
@@ -57,12 +55,13 @@
    "qs": "6.11.2",
    "react-diff-viewer-continued": "3.2.6",
    "react-toastify": "10.0.5",
-    "sass": "^1.71.1",
+    "sass": "1.77.4",
    "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/ws": "^8.5.10",
@@ -71,8 +70,8 @@
    "mini-css-extract-plugin": "1.6.2",
    "payload": "workspace:*",
    "postcss-loader": "^8.1.1",
-    "postcss-preset-env": "^9.5.0",
-    "sass-loader": "^14.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",
--- a/packages/next/src/views/Document/getDocumentData.tsx
+++ b/packages/next/src/views/Document/getDocumentData.tsx
@@ -1,3 +1,4 @@
+import type { Locale } from 'payload/config'
 import type {
  Data,
  PayloadRequestWithData,
--- a/packages/payload/package.json
+++ b/packages/payload/package.json
@@ -69,22 +69,19 @@
    "build": "pnpm copyfiles && pnpm build:swc && pnpm build:types",
    "build:swc": "swc ./src -d ./dist --config-file .swcrc",
    "build:types": "tsc --emitDeclarationOnly --outDir dist",
-    "build:watch": "nodemon --watch 'src/**' --ext 'ts,tsx' --exec \"pnpm build:tsc\"",
    "clean": "rimraf {dist,*.tsbuildinfo}",
    "clean:cache": "rimraf node_modules/.cache",
    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,ttf,woff,woff2,eot,svg,jpg,png,json}\" dist/",
-    "dev": "nodemon",
-    "dev:postgres": "cross-env PAYLOAD_DATABASE=postgres nodemon",
    "fix": "eslint \"src/**/*.ts\" --fix",
    "lint": "eslint \"src/**/*.ts\"",
    "prepublishOnly": "pnpm clean && pnpm turbo build",
    "pretest": "pnpm build"
  },
  "dependencies": {
+    "@next/env": "^15.0.0-rc.0",
    "@payloadcms/translations": "workspace:*",
    "@swc-node/core": "^1.13.0",
    "@swc-node/sourcemap-support": "^0.5.0",
-    "@types/probe-image-size": "^7.2.4",
    "ajv": "^8.12.0",
    "bson-objectid": "2.0.4",
    "ci-info": "^4.0.0",
@@ -92,9 +89,8 @@
    "console-table-printer": "2.11.2",
    "dataloader": "2.2.2",
    "deepmerge": "4.3.1",
-    "dotenv": "8.6.0",
    "file-type": "16.5.4",
-    "find-up": "4.1.0",
+    "find-up": "7.0.0",
    "get-tsconfig": "^4.7.2",
    "http-status": "1.6.2",
    "image-size": "^1.1.1",
@@ -115,41 +111,19 @@
  "devDependencies": {
    "@monaco-editor/react": "4.5.1",
    "@payloadcms/eslint-config": "workspace:*",
-    "@types/asap": "2.0.0",
-    "@types/body-parser": "1.19.2",
-    "@types/compression": "1.7.2",
    "@types/express-fileupload": "1.4.1",
-    "@types/express-rate-limit": "5.1.3",
-    "@types/express-serve-static-core": "4.17.35",
-    "@types/hapi__joi": "17.1.9",
-    "@types/ignore-styles": "5.0.0",
    "@types/joi": "14.3.4",
    "@types/json-schema": "7.0.12",
    "@types/jsonwebtoken": "8.5.9",
-    "@types/method-override": "0.0.32",
-    "@types/mime": "2.0.3",
    "@types/minimist": "1.2.2",
    "@types/mkdirp": "1.0.2",
-    "@types/node-fetch": "2.6.4",
    "@types/nodemailer": "6.4.14",
-    "@types/passport": "1.0.12",
-    "@types/passport-anonymous": "1.0.3",
-    "@types/passport-jwt": "3.0.9",
-    "@types/passport-local": "1.0.35",
    "@types/pluralize": "0.0.33",
-    "@types/react-datepicker": "4.11.2",
-    "confusing-browser-globals": "1.0.11",
+    "@types/react-datepicker": "6.2.0",
+    "@types/uuid": "^9.0.8",
    "copyfiles": "2.4.1",
    "cross-env": "7.0.3",
-    "file-loader": "6.2.0",
-    "form-data": "3.0.1",
-    "get-port": "5.1.1",
    "graphql-http": "^1.22.0",
-    "mini-css-extract-plugin": "1.6.2",
-    "nodemon": "3.0.3",
-    "object.assign": "4.1.4",
-    "object.entries": "1.1.6",
-    "passport-strategy": "1.0.0",
    "rimraf": "3.0.2",
    "sharp": "0.32.6"
  },
--- a/packages/payload/src/bin/loadEnv.ts
+++ b/packages/payload/src/bin/loadEnv.ts
@@ -1,22 +1,25 @@
-import dotenv from 'dotenv'
-import findUp from 'find-up'
-import fs from 'fs'
-import path from 'path'
+import nextEnvImport from '@next/env'
+const { loadEnvConfig } = nextEnvImport
+import { findUpStop, findUpSync } from 'find-up'

 /**
- * Try to find user's .env and load it
+ * Try to find user's env files and load it. Uses the same algorithm next.js uses to parse env files, meaning this also supports .env.local, .env.development, .env.production, etc.
 */
-export function loadEnv() {
-  const envPath = findUp.sync('.env')
+export function loadEnv(path?: string) {
+  if (path?.length) {
+    loadEnvConfig(path, true)
+    return
+  }

-  if (envPath) {
-    dotenv.config({ path: envPath })
-  } else {
-    const cwdPath = path.resolve(process.cwd(), '.env')
-    if (fs.existsSync(cwdPath)) {
-      dotenv.config({
-        path: cwdPath,
+  const { loadedEnvFiles } = loadEnvConfig(process.cwd(), true) // assuming this won't run in production
+
+  if (!loadedEnvFiles?.length) {
+    // use findUp to find the env file. So, run loadEnvConfig for every directory upwards
+    findUpSync((dir) => {
+      const { loadedEnvFiles } = loadEnvConfig(dir, true)
+      if (loadedEnvFiles?.length) {
+        return findUpStop
+      }
    })
  }
-  }
 }
--- a/packages/payload/src/config/find.ts
+++ b/packages/payload/src/config/find.ts
@@ -1,4 +1,4 @@
-import findUp from 'find-up'
+import { findUpSync, pathExistsSync } from 'find-up'
 import fs from 'fs'
 import path from 'path'

@@ -13,7 +13,7 @@ const getTSConfigPaths = (): {
  rootPath?: string
  srcPath?: string
 } => {
-  const tsConfigPath = findUp.sync('tsconfig.json')
+  const tsConfigPath = findUpSync('tsconfig.json')

  if (!tsConfigPath) {
    return {
@@ -79,17 +79,17 @@ export const findConfig = (): string => {
  for (const searchPath of searchPaths) {
    if (!searchPath) continue

-    const configPath = findUp.sync(
+    const configPath = findUpSync(
      (dir) => {
        const tsPath = path.join(dir, 'payload.config.ts')
-        const hasTS = findUp.sync.exists(tsPath)
+        const hasTS = pathExistsSync(tsPath)

        if (hasTS) {
          return tsPath
        }

        const jsPath = path.join(dir, 'payload.config.js')
-        const hasJS = findUp.sync.exists(jsPath)
+        const hasJS = pathExistsSync(jsPath)

        if (hasJS) {
          return jsPath
@@ -108,13 +108,13 @@ export const findConfig = (): string => {
  // If no config file is found in the directories defined by tsconfig.json,
  // try searching in the 'src' and 'dist' directory as a last resort, as they are most commonly used
  if (process.env.NODE_ENV === 'production') {
-    const distConfigPath = findUp.sync(['payload.config.js', 'payload.config.ts'], {
+    const distConfigPath = findUpSync(['payload.config.js', 'payload.config.ts'], {
      cwd: path.resolve(process.cwd(), 'dist'),
    })

    if (distConfigPath) return distConfigPath
  } else {
-    const srcConfigPath = findUp.sync(['payload.config.js', 'payload.config.ts'], {
+    const srcConfigPath = findUpSync(['payload.config.js', 'payload.config.ts'], {
      cwd: path.resolve(process.cwd(), 'src'),
    })

--- a/packages/payload/src/fields/validations.spec.ts
+++ b/packages/payload/src/fields/validations.spec.ts
@@ -1,10 +1,11 @@
 import type { ValidateOptions } from './config/types.js'
+import { jest } from '@jest/globals'

 import { number, password, point, relationship, select, text, textarea } from './validations.js'

 const t = jest.fn((string) => string)

-let options: ValidateOptions<any, any> = {
+let options: ValidateOptions<any, any, any> = {
  data: undefined,
  operation: 'create',
  siblingData: undefined,
--- a/packages/payload/src/utilities/importWithoutClientFiles.ts
+++ b/packages/payload/src/utilities/importWithoutClientFiles.ts
@@ -4,6 +4,8 @@ import path from 'path'

 import type { SanitizedConfig } from '../config/types.js'

+import { loadEnv } from '../bin/loadEnv.js'
+
 const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)

@@ -20,6 +22,7 @@ export const importWithoutClientFiles = async <T = unknown>(filePath: string) =>
 * Resolve and load Payload config from either a relative or absolute path
 */
 export const importConfig = async (configPath: string) => {
+  loadEnv() // loadConfig would usually be run outside of next. This means they will not get next's automatic env loading here. In order to not force them to install dotenv and set it up manually, we can load the env for them here
  const isAbsolutePath = path.isAbsolute(configPath)
  if (isAbsolutePath) {
    const config = await importWithoutClientFiles<{ default: Promise<SanitizedConfig> }>(configPath)
--- a/packages/payload/src/utilities/telemetry/index.ts
+++ b/packages/payload/src/utilities/telemetry/index.ts
@@ -2,7 +2,7 @@ import { execSync } from 'child_process'
 import ciInfo from 'ci-info'
 import ConfImport from 'conf'
 import { randomBytes } from 'crypto'
-import findUp from 'find-up'
+import { findUp } from 'find-up'
 import fs from 'fs'
 import path from 'path'
 import { fileURLToPath } from 'url'
--- a/packages/plugin-cloud/package.json
+++ b/packages/plugin-cloud/package.json
@@ -41,7 +41,7 @@
    "resend": "^0.17.2"
  },
  "devDependencies": {
-    "@types/jest": "^29.5.1",
+    "@types/jest": "29.5.12",
    "@types/nodemailer": "6.4.14",
    "payload": "workspace:*",
    "ts-jest": "^29.1.0"
--- a/packages/plugin-cloud/src/email.spec.ts
+++ b/packages/plugin-cloud/src/email.spec.ts
@@ -1,6 +1,7 @@
 import type { Config } from 'payload/config'
 import type { Payload } from 'payload'
 import nodemailer from 'nodemailer'
+import { jest } from '@jest/globals'

 import { defaults } from 'payload/config'

@@ -11,7 +12,7 @@ describe('email', () => {
  const skipVerify = true
  const defaultDomain = 'test.com'
  const apiKey = 'test'
-  let createTransportSpy: jest.SpyInstance
+  let createTransportSpy: jest.Spied<any>

  const mockedPayload: Payload = jest.fn() as unknown as Payload

--- a/packages/plugin-cloud/src/plugin.spec.ts
+++ b/packages/plugin-cloud/src/plugin.spec.ts
@@ -1,5 +1,6 @@
 import type { Config } from 'payload/config'
 import type { Payload } from 'payload'
+import { jest } from '@jest/globals'

 import nodemailer from 'nodemailer'
 import { defaults } from 'payload/config'
@@ -10,7 +11,7 @@ import { nodemailerAdapter } from '@payloadcms/email-nodemailer'
 const mockedPayload: Payload = jest.fn() as unknown as Payload

 describe('plugin', () => {
-  let createTransportSpy: jest.SpyInstance
+  let createTransportSpy: jest.Spied<any>

  const skipVerify = true

--- a/packages/plugin-sentry/package.json
+++ b/packages/plugin-sentry/package.json
@@ -45,14 +45,13 @@
  "devDependencies": {
    "@payloadcms/eslint-config": "workspace:*",
    "@types/express": "^4.17.9",
-    "@types/jest": "^29.5.2",
+    "@types/jest": "29.5.12",
    "@types/node": "20.12.5",
    "@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",
-    "jest": "^29.5.0",
+    "jest": "^29.7.0",
    "nodemon": "3.0.3",
    "payload": "workspace:*",
    "ts-jest": "^29.1.0",
--- a/packages/plugin-stripe/package.json
+++ b/packages/plugin-stripe/package.json
@@ -63,7 +63,7 @@
    "@types/lodash.get": "^4.4.7",
    "@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",
+    "@types/uuid": "^9.0.8",
    "payload": "workspace:*"
  },
  "peerDependencies": {
--- a/packages/translations/package.json
+++ b/packages/translations/package.json
@@ -40,7 +40,7 @@
    "@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",
+    "dotenv": "16.4.5",
    "prettier": "^3.0.3",
    "typescript": "5.4.5"
  },
--- a/packages/translations/src/importDateFNSLocale.ts
+++ b/packages/translations/src/importDateFNSLocale.ts
@@ -5,119 +5,119 @@ export const importDateFNSLocale = async (locale: string): Promise<Locale> => {

  switch (locale) {
    case 'ar':
-      result = await import('date-fns/locale/ar')
+      result = (await import('date-fns/locale/ar')).ar

      break
    case 'az':
-      result = await import('date-fns/locale/az')
+      result = (await import('date-fns/locale/az')).az

      break
    case 'bg':
-      result = await import('date-fns/locale/bg')
+      result = (await import('date-fns/locale/bg')).bg

      break
    case 'cs':
-      result = await import('date-fns/locale/cs')
+      result = (await import('date-fns/locale/cs')).cs

      break
    case 'de':
-      result = await import('date-fns/locale/de')
+      result = (await import('date-fns/locale/de')).de

      break
    case 'en-US':
-      result = await import('date-fns/locale/en-US')
+      result = (await import('date-fns/locale/en-US')).enUS

      break
    case 'es':
-      result = await import('date-fns/locale/es')
+      result = (await import('date-fns/locale/es')).es

      break
    case 'fa-IR':
-      result = await import('date-fns/locale/fa-IR')
+      result = (await import('date-fns/locale/fa-IR')).faIR

      break
    case 'fr':
-      result = await import('date-fns/locale/fr')
+      result = (await import('date-fns/locale/fr')).fr

      break
    case 'he':
-      result = await import('date-fns/locale/he')
+      result = (await import('date-fns/locale/he')).he

      break
    case 'hr':
-      result = await import('date-fns/locale/hr')
+      result = (await import('date-fns/locale/hr')).hr

      break
    case 'hu':
-      result = await import('date-fns/locale/hu')
+      result = (await import('date-fns/locale/hu')).hu

      break
    case 'it':
-      result = await import('date-fns/locale/it')
+      result = (await import('date-fns/locale/it')).it

      break
    case 'ja':
-      result = await import('date-fns/locale/ja')
+      result = (await import('date-fns/locale/ja')).ja

      break
    case 'ko':
-      result = await import('date-fns/locale/ko')
+      result = (await import('date-fns/locale/ko')).ko

      break
    case 'nb':
-      result = await import('date-fns/locale/nb')
+      result = (await import('date-fns/locale/nb')).nb

      break
    case 'nl':
-      result = await import('date-fns/locale/nl')
+      result = (await import('date-fns/locale/nl')).nl

      break
    case 'pl':
-      result = await import('date-fns/locale/pl')
+      result = (await import('date-fns/locale/pl')).pl

      break
    case 'pt':
-      result = await import('date-fns/locale/pt')
+      result = (await import('date-fns/locale/pt')).pt

      break
    case 'ro':
-      result = await import('date-fns/locale/ro')
+      result = (await import('date-fns/locale/ro')).ro

      break
    case 'ru':
-      result = await import('date-fns/locale/ru')
+      result = (await import('date-fns/locale/ru')).ru

      break
    case 'sk':
-      result = await import('date-fns/locale/sk')
+      result = (await import('date-fns/locale/sk')).sk

      break
    case 'sv':
-      result = await import('date-fns/locale/sv')
+      result = (await import('date-fns/locale/sv')).sv

      break
    case 'th':
-      result = await import('date-fns/locale/th')
+      result = (await import('date-fns/locale/th')).th

      break
    case 'tr':
-      result = await import('date-fns/locale/tr')
+      result = (await import('date-fns/locale/tr')).tr

      break
    case 'uk':
-      result = await import('date-fns/locale/uk')
+      result = (await import('date-fns/locale/uk')).uk

      break
    case 'vi':
-      result = await import('date-fns/locale/vi')
+      result = (await import('date-fns/locale/vi')).vi

      break
    case 'zh-CN':
-      result = await import('date-fns/locale/zh-CN')
+      result = (await import('date-fns/locale/zh-CN')).zhCN

      break
    case 'zh-TW':
-      result = await import('date-fns/locale/zh-TW')
+      result = (await import('date-fns/locale/zh-TW')).zhTW

      break
  }
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -114,9 +114,9 @@
    "react-image-crop": "10.1.8",
    "react-select": "5.8.0",
    "react-toastify": "10.0.5",
-    "scheduler": "0.23.0",
-    "use-context-selector": "1.4.1",
-    "uuid": "9.0.1"
+    "scheduler": "0.25.0-rc-f994737d14-20240522",
+    "use-context-selector": "2.0.0",
+    "uuid": "^9.0.1"
  },
  "devDependencies": {
    "@babel/cli": "^7.24.5",
@@ -130,7 +130,7 @@
    "@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",
+    "@types/uuid": "^9.0.8",
    "babel-plugin-react-compiler": "0.0.0-experimental-592953e-20240517",
    "babel-plugin-transform-remove-imports": "^1.7.1",
    "css-loader": "^6.10.0",
@@ -138,8 +138,8 @@
    "mini-css-extract-plugin": "1.6.2",
    "payload": "workspace:*",
    "postcss-loader": "^8.1.1",
-    "postcss-preset-env": "^9.5.0",
-    "sass-loader": "^14.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",
--- a/packages/ui/src/elements/DatePicker/DatePicker.tsx
+++ b/packages/ui/src/elements/DatePicker/DatePicker.tsx
@@ -77,7 +77,6 @@ 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/providers/Translation/index.tsx
+++ b/packages/ui/src/providers/Translation/index.tsx
@@ -11,7 +11,7 @@ import type { ClientConfig, LanguageOptions } from 'payload/types'

 import { t } from '@payloadcms/translations'
 import { importDateFNSLocale } from '@payloadcms/translations'
-import enUS from 'date-fns/locale/en-US'
+import { enUS } from 'date-fns/locale/en-US'
 import React, { createContext, useContext, useEffect, useState } from 'react'

 import { useRouteCache } from '../RouteCache/index.js'
--- a/packages/ui/src/utilities/dateLocales.ts
+++ b/packages/ui/src/utilities/dateLocales.ts
@@ -1,29 +1,29 @@
-import ar from 'date-fns/locale/ar'
-import az from 'date-fns/locale/az'
-import bg from 'date-fns/locale/bg'
-import cs from 'date-fns/locale/cs'
-import de from 'date-fns/locale/de'
-import enUS from 'date-fns/locale/en-US'
-import es from 'date-fns/locale/es'
-import faIR from 'date-fns/locale/fa-IR'
-import fr from 'date-fns/locale/fr'
-import hr from 'date-fns/locale/hr'
-import hu from 'date-fns/locale/hu'
-import it from 'date-fns/locale/it'
-import ja from 'date-fns/locale/ja'
-import ko from 'date-fns/locale/ko'
-import nb from 'date-fns/locale/nb'
-import nl from 'date-fns/locale/nl'
-import pl from 'date-fns/locale/pl'
-import pt from 'date-fns/locale/pt'
-import ro from 'date-fns/locale/ro'
-import ru from 'date-fns/locale/ru'
-import sv from 'date-fns/locale/sv'
-import th from 'date-fns/locale/th'
-import tr from 'date-fns/locale/tr'
-import vi from 'date-fns/locale/vi'
-import zhCN from 'date-fns/locale/zh-CN'
-import zhTW from 'date-fns/locale/zh-TW'
+import { ar } from 'date-fns/locale/ar'
+import { az } from 'date-fns/locale/az'
+import { bg } from 'date-fns/locale/bg'
+import { cs } from 'date-fns/locale/cs'
+import { de } from 'date-fns/locale/de'
+import { enUS } from 'date-fns/locale/en-US'
+import { es } from 'date-fns/locale/es'
+import { faIR } from 'date-fns/locale/fa-IR'
+import { fr } from 'date-fns/locale/fr'
+import { hr } from 'date-fns/locale/hr'
+import { hu } from 'date-fns/locale/hu'
+import { it } from 'date-fns/locale/it'
+import { ja } from 'date-fns/locale/ja'
+import { ko } from 'date-fns/locale/ko'
+import { nb } from 'date-fns/locale/nb'
+import { nl } from 'date-fns/locale/nl'
+import { pl } from 'date-fns/locale/pl'
+import { pt } from 'date-fns/locale/pt'
+import { ro } from 'date-fns/locale/ro'
+import { ru } from 'date-fns/locale/ru'
+import { sv } from 'date-fns/locale/sv'
+import { th } from 'date-fns/locale/th'
+import { tr } from 'date-fns/locale/tr'
+import { vi } from 'date-fns/locale/vi'
+import { zhCN } from 'date-fns/locale/zh-CN'
+import { zhTW } from 'date-fns/locale/zh-TW'

 export const dateLocales = {
  ar,
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/test/collections-graphql/int.spec.ts
+++ b/test/collections-graphql/int.spec.ts
@@ -1,5 +1,6 @@
 import type { Payload } from 'payload'

+import { fileURLToPath } from 'node:url'
 import path from 'path'
 import { getFileByPath } from 'payload/uploads'
 import { mapAsync } from 'payload/utilities'
@@ -16,6 +17,9 @@ const title = 'title'
 let restClient: NextRESTClient
 let payload: Payload

+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
+
 describe('collections-graphql', () => {
  beforeAll(async () => {
    ;({ payload, restClient } = await initPayloadInt(config))
@@ -1077,7 +1081,7 @@ describe('collections-graphql', () => {
  })

  it('should query upload enabled docs', async () => {
-    const file = await getFileByPath(path.resolve(__dirname, '../uploads/test-image.jpg'))
+    const file = await getFileByPath(path.resolve(dirname, '../uploads/test-image.jpg'))

    const mediaDoc = await payload.create({
      collection: 'media',
--- a/test/create-payload-app/int.spec.ts
+++ b/test/create-payload-app/int.spec.ts
@@ -30,7 +30,7 @@ describe('create-payload-app', () => {
    const projectDir = tempy.directory()
    beforeEach(async () => {
      if (fs.existsSync(projectDir)) {
-        fs.rmdirSync(projectDir, { recursive: true })
+        fs.rmSync(projectDir, { recursive: true })
      }

      // Create dir for Next.js project
@@ -57,7 +57,7 @@ describe('create-payload-app', () => {

    afterEach(() => {
      if (fs.existsSync(projectDir)) {
-        fs.rmdirSync(projectDir, { recursive: true })
+        fs.rmSync(projectDir, { recursive: true })
      }
    })

--- a/test/fields/collections/Lexical/e2e/blocks/e2e.spec.ts
+++ b/test/fields/collections/Lexical/e2e/blocks/e2e.spec.ts
@@ -575,6 +575,14 @@ describe('lexicalBlocks', () => {
      // reload page and assert again
      await page.reload()
      await wait(300)
+      await newSubLexicalAndUploadBlock.scrollIntoViewIfNeeded()
+      await expect(newSubLexicalAndUploadBlock).toBeVisible()
+      await newSubLexicalAndUploadBlock
+        .locator('.field-type.upload .file-meta__url a')
+        .scrollIntoViewIfNeeded()
+      await expect(
+        newSubLexicalAndUploadBlock.locator('.field-type.upload .file-meta__url a'),
+      ).toBeVisible()

      await expect(
        newSubLexicalAndUploadBlock.locator('.field-type.upload .file-meta__url a'),
--- a/test/package.json
+++ b/test/package.json
@@ -42,19 +42,22 @@
    "@payloadcms/storage-vercel-blob": "workspace:*",
    "@payloadcms/translations": "workspace:*",
    "@payloadcms/ui": "workspace:*",
+    "@sentry/react": "^7.77.0",
    "@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",
+    "dotenv": "16.4.5",
    "eslint-plugin-payload": "workspace:*",
    "eslint-plugin-playwright": "1.5.3",
    "execa": "5.1.1",
    "http-status": "1.6.2",
+    "jwt-decode": "4.0.0",
    "lexical": "0.15.0",
    "payload": "workspace:*",
    "server-only": "^0.0.1",
+    "slate": "0.91.4",
    "tempy": "^1.0.1",
    "ts-essentials": "7.0.3",
    "typescript": "5.4.5",
--- a/test/plugin-relationship-object-ids/config.ts
+++ b/test/plugin-relationship-object-ids/config.ts
@@ -1,5 +1,8 @@
 import { relationshipsAsObjectID } from '@payloadcms/plugin-relationship-object-ids'
 import path from 'path'
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
+import { fileURLToPath } from 'node:url'

 import { buildConfigWithDefaults } from '../buildConfigWithDefaults.js'

@@ -99,7 +102,7 @@ export default buildConfigWithDefaults({
      const upload = await payload.create({
        collection: 'uploads',
        data: {},
-        filePath: path.resolve(__dirname, './payload-logo.png'),
+        filePath: path.resolve(dirname, './payload-logo.png'),
      })

      await payload.create({