chore: upgrade to pnpm v9, regenerate lockfile (#7369)

- regenerates the lockfile
- upgrades pnpm from v8 to v9.7.0 minimum
- ensures playwright does not import payload config. Even after our
importmap revamp that made the payload config server-only / node-safe, I
was getting these `Error: Invariant: AsyncLocalStorage accessed in
runtime where it is not available` errors in combination with pnpm v9
and lockfile regeneration.
This does not happen with pnpm v8, however I'm still blaming playwright
for this, as this does not happen in dev and we've had this specific
error with playwright in the past when we were importing the payload
config. Perhaps it's related to both playwright and the future Next.js
process importing the same config file, and not related to the config
file containing client-side React code.
Making sure playwright doesn't import the config fixed it (it was
importing it through the import map generation). The import map
generation is now run in a separate process, and playwright simply waits
for it
- One positive thing: this pr fixes a bunch of typescript errors with
react-select components. We got those errors because react-select types
are not compatible with react 19. lockfile regeneration fixed that (not
related to pnpm v9) - probably because we were installing mismatching
react versions (I saw both `fb9a90fa48-20240614` and `06d0b89e-20240801`
in our lockfile). I have thus removed the caret for react and react-dom
in our package.json - now it's consistent

.github/actions/setup/action.yml

@@ -9,7 +9,7 @@ inputs:
   pnpm-version:
     description: 'The pnpm version to use'
     required: true
-    default: 8.15.7
+    default: 9.7.0
 
 runs:
   using: composite

.github/workflows/main.yml

@@ -18,7 +18,7 @@ concurrency:
 
 env:
   NODE_VERSION: 18.20.2
-  PNPM_VERSION: 8.15.7
+  PNPM_VERSION: 9.7.0
   DO_NOT_TRACK: 1 # Disable Turbopack telemetry
   NEXT_TELEMETRY_DISABLED: 1 # Disable Next telemetry
 

.github/workflows/release-canary.yml

@@ -7,7 +7,7 @@ on:
 
 env:
   NODE_VERSION: 18.20.2
-  PNPM_VERSION: 8.15.7
+  PNPM_VERSION: 9.7.0
   DO_NOT_TRACK: 1 # Disable Turbopack telemetry
   NEXT_TELEMETRY_DISABLED: 1 # Disable Next telemetry
 

.npmrc

@@ -1,2 +1,3 @@
 symlink=true
-node-linker=isolated # due to a typescript bug, isolated mode requires @types/express-serve-static-core, terser and monaco-editor to be installed https://github.com/microsoft/TypeScript/issues/47663#issuecomment-1519138189 along with two other changes in the code which I've marked with (tsbugisolatedmode) in the code
+node-linker=isolated
+hoist-workspace-packages=false # the default in pnpm v9 is true, but that can break our runtime dependency checks

package.json

@@ -142,8 +142,8 @@
     "playwright-core": "1.46.0",
     "prettier": "3.3.2",
     "prompts": "2.4.2",
-    "react": "^19.0.0-rc-06d0b89e-20240801",
+    "react": "19.0.0-rc-06d0b89e-20240801",
-    "react-dom": "^19.0.0-rc-06d0b89e-20240801",
+    "react-dom": "19.0.0-rc-06d0b89e-20240801",
     "rimraf": "3.0.2",
     "semver": "^7.5.4",
     "sharp": "0.32.6",
@@ -162,7 +162,7 @@
   },
   "engines": {
     "node": "^18.20.2 || >=20.9.0",
-    "pnpm": "^8.15.7"
+    "pnpm": "^9.7.0"
   },
   "pnpm": {
     "allowedDeprecatedVersions": {

packages/payload/src/fields/config/types.ts

@@ -1,11 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import type { EditorProps } from '@monaco-editor/react'
-import type { CSSProperties } from 'react'
-
-//eslint-disable-next-line @typescript-eslint/no-unused-vars
-import monacoeditor from 'monaco-editor' // IMPORTANT - DO NOT REMOVE: This is required for pnpm's default isolated mode to work - even though the import is not used. This is due to a typescript bug: https://github.com/microsoft/TypeScript/issues/47663#issuecomment-1519138189. (tsbugisolatedmode)
 import type { JSONSchema4 } from 'json-schema'
+import type { CSSProperties } from 'react'
 import type { DeepUndefinable } from 'ts-essentials'
 
 import type { RichTextAdapter, RichTextAdapterProvider } from '../../admin/RichText.js'
@@ -29,7 +26,7 @@ import type {
 } from '../../config/types.js'
 import type { DBIdentifierName } from '../../database/types.js'
 import type { SanitizedGlobalConfig } from '../../globals/config/types.js'
-import type { CollectionSlug, JsonObject } from '../../index.js'
+import type { CollectionSlug } from '../../index.js'
 import type { DocumentPreferences } from '../../preferences/types.js'
 import type { Operation, PayloadRequest, RequestContext, Where } from '../../types/index.js'
 

packages/plugin-cloud-storage/package.json

@@ -67,8 +67,8 @@
     "range-parser": "^1.2.1"
   },
   "devDependencies": {
-    "@aws-sdk/client-s3": "^3.525.0",
+    "@aws-sdk/client-s3": "^3.614.0",
-    "@aws-sdk/lib-storage": "^3.525.0",
+    "@aws-sdk/lib-storage": "^3.614.0",
     "@azure/storage-blob": "^12.11.0",
     "@google-cloud/storage": "^7.7.0",
     "@types/find-node-modules": "^2.1.2",
@@ -76,8 +76,8 @@
     "payload": "workspace:*"
   },
   "peerDependencies": {
-    "@aws-sdk/client-s3": "^3.525.0",
+    "@aws-sdk/client-s3": "^3.614.0",
-    "@aws-sdk/lib-storage": "^3.525.0",
+    "@aws-sdk/lib-storage": "^3.614.0",
     "@azure/abort-controller": "^1.0.0",
     "@azure/storage-blob": "^12.11.0",
     "@google-cloud/storage": "^7.7.0",

packages/plugin-cloud/package.json

@@ -31,10 +31,10 @@
     "test": "jest"
   },
   "dependencies": {
-    "@aws-sdk/client-cognito-identity": "^3.525.0",
+    "@aws-sdk/client-cognito-identity": "^3.614.0",
-    "@aws-sdk/client-s3": "^3.525.0",
+    "@aws-sdk/client-s3": "^3.614.0",
-    "@aws-sdk/credential-providers": "^3.525.0",
+    "@aws-sdk/credential-providers": "^3.614.0",
-    "@aws-sdk/lib-storage": "^3.525.0",
+    "@aws-sdk/lib-storage": "^3.614.0",
     "@payloadcms/email-nodemailer": "workspace:*",
     "amazon-cognito-identity-js": "^6.1.2",
     "nodemailer": "6.9.10",

packages/storage-s3/package.json

@@ -32,8 +32,8 @@
     "prepublishOnly": "pnpm clean && pnpm turbo build"
   },
   "dependencies": {
-    "@aws-sdk/client-s3": "^3.525.0",
+    "@aws-sdk/client-s3": "^3.614.0",
-    "@aws-sdk/lib-storage": "^3.525.0",
+    "@aws-sdk/lib-storage": "^3.614.0",
     "@payloadcms/plugin-cloud-storage": "workspace:*"
   },
   "devDependencies": {

packages/ui/src/elements/ReactSelect/Control/index.tsx

@@ -16,7 +16,6 @@ export const Control: React.FC<ControlProps<Option, any>> = (props) => {
 
   return (
     <React.Fragment>
-      {/* @ts-expect-error // TODO Fix this - Broke with React 19 types */}
       <SelectComponents.Control
         {...props}
         innerProps={{

packages/ui/src/elements/ReactSelect/MultiValue/index.tsx

@@ -40,7 +40,6 @@ export const MultiValue: React.FC<MultiValueProps<Option>> = (props) => {
 
   return (
     <React.Fragment>
-      {/* @ts-expect-error // TODO Fix this - Broke with React 19 types */}
       <SelectComponents.MultiValue
         {...props}
         className={classes}

packages/ui/src/elements/ReactSelect/MultiValueLabel/index.tsx

@@ -16,7 +16,6 @@ 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={{

packages/ui/src/elements/ReactSelect/SingleValue/index.tsx

@@ -13,7 +13,6 @@ export const SingleValue: React.FC<SingleValueProps<Option>> = (props) => {
 
   return (
     <React.Fragment>
-      {/* @ts-expect-error // TODO Fix this - Broke with React 19 types */}
       <SelectComponents.SingleValue
         {...props}
         className={[baseClass, className].filter(Boolean).join(' ')}

packages/ui/src/elements/ReactSelect/ValueContainer/index.tsx

@@ -16,7 +16,6 @@ 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>
   )

packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.tsx

@@ -47,7 +47,6 @@ 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={{

packages/ui/src/fields/Relationship/select-components/SingleValue/index.tsx

@@ -41,7 +41,6 @@ export const SingleValue: React.FC<SingleValueProps<Option>> = (props) => {
 
   return (
     <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`}>

test/helpers/initPayloadE2ENoConfig.ts

@@ -7,7 +7,7 @@ import { fileURLToPath, parse } from 'url'
 
 import type { GeneratedTypes } from './sdk/types.js'
 
-import { runInit } from '../runInit.js'
+import { runInitSeparateProcess } from '../runInitSeparateProcess.js'
 import { createTestHooks } from '../testHooks.js'
 import { getNextJSRootDir } from './getNextJSRootDir.js'
 import { PayloadTestSDK } from './sdk/index.js'
@@ -32,7 +32,7 @@ export async function initPayloadE2ENoConfig<T extends GeneratedTypes<T>>({
 }: Args): Promise<Result<T>> {
   const testSuiteName = path.basename(dirname)
 
-  await runInit(testSuiteName, true)
+  await runInitSeparateProcess(testSuiteName, true)
 
   const { beforeTest } = await createTestHooks(testSuiteName)
   await beforeTest()
@@ -86,6 +86,7 @@ export async function initPayloadE2ENoConfig<T extends GeneratedTypes<T>>({
   // which seeds test data twice + other bad things.
   // We initialize Payload above so we can have access to it in the tests
   void app.prepare().then(() => {
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
     createServer(async (req, res) => {
       const parsedUrl = parse(req.url, true)
       await handle(req, res, parsedUrl)

test/helpers/initPayloadInt.ts

@@ -14,7 +14,7 @@ export async function initPayloadInt(
   testSuiteNameOverride?: string,
 ): Promise<{ config: SanitizedConfig; payload: Payload; restClient: NextRESTClient }> {
   const testSuiteName = testSuiteNameOverride ?? path.basename(dirname)
-  await runInit(testSuiteName, false, false, true)
+  await runInit(testSuiteName, false, true)
   console.log('importing config', path.resolve(dirname, 'config.ts'))
   const { default: config } = await import(path.resolve(dirname, 'config.ts'))
   console.log('starting payload')

test/package.json

@@ -22,7 +22,7 @@
     "tsconfig.json": "node scripts/reset-tsconfig.js"
   },
   "devDependencies": {
-    "@aws-sdk/client-s3": "^3.525.0",
+    "@aws-sdk/client-s3": "^3.614.0",
     "@lexical/headless": "0.17.0",
     "@lexical/markdown": "0.17.0",
     "@payloadcms/db-mongodb": "workspace:*",

test/runInit.ts

@@ -1,70 +1,9 @@
-import child_process from 'node:child_process'
-import path from 'path'
-import { fileURLToPath } from 'url'
-
 import { initDevAndTest } from './initDevAndTest.js'
 
-const filename = fileURLToPath(import.meta.url)
-const dirname = path.dirname(filename)
-
 export async function runInit(
   testSuiteArg: string,
   writeDBAdapter: boolean,
-  separateProcess: boolean = false,
   skipGenImportMap: boolean = false,
 ): Promise<void> {
-  if (!separateProcess) {
   await initDevAndTest(testSuiteArg, String(writeDBAdapter), String(skipGenImportMap))
-
-    return
-  }
-
-  let done = false
-
-  // Now use node & swc-node/register to execute initDevAndTest and wait until it console logs "Done". use child_process
-  // 1. execute
-  // 2. wait until console.log("Done")
-  const child = child_process.spawn(
-    'node',
-    [
-      '--no-deprecation',
-      '--import',
-      '@swc-node/register/esm-register',
-      'test/initDevAndTest.ts',
-      testSuiteArg,
-      writeDBAdapter ? 'true' : 'false',
-      skipGenImportMap ? 'true' : 'false',
-    ],
-    {
-      stdio: 'pipe',
-      cwd: path.resolve(dirname, '..'),
-    },
-  )
-
-  child.stdout.on('data', (data) => {
-    console.log('initDevAndTest data', data.toString())
-    if (data.toString().includes('Done')) {
-      child.kill()
-      done = true
-    }
-  })
-
-  // on error
-  child.stderr.on('data', (data) => {
-    console.error('initDevAndTest error', data.toString())
-  })
-
-  child.on('close', (code) => {
-    console.log(`Child process closed with code ${code}`)
-  })
-
-  // wait for done to be true
-  await new Promise((resolve) => {
-    const interval = setInterval(() => {
-      if (done) {
-        clearInterval(interval)
-        resolve(undefined)
-      }
-    }, 100)
-  })
 }

test/runInitSeparateProcess.ts

@@ -0,0 +1,62 @@
+import child_process from 'node:child_process'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
+
+export async function runInitSeparateProcess(
+  testSuiteArg: string,
+  writeDBAdapter: boolean,
+  skipGenImportMap: boolean = false,
+): Promise<void> {
+  let done = false
+
+  // Now use node & swc-node/register to execute initDevAndTest and wait until it console logs "Done". use child_process
+  // 1. execute
+  // 2. wait until console.log("Done")
+  const child = child_process.spawn(
+    'node',
+    [
+      '--no-deprecation',
+      '--import',
+      '@swc-node/register/esm-register',
+      'test/initDevAndTest.ts',
+      'true',
+      testSuiteArg,
+      writeDBAdapter ? 'true' : 'false',
+      skipGenImportMap ? 'true' : 'false',
+    ],
+    {
+      stdio: 'pipe',
+      cwd: path.resolve(dirname, '..'),
+    },
+  )
+
+  child.stdout.on('data', (data) => {
+    console.log('initDevAndTest data', data.toString())
+    if (data.toString().includes('Done')) {
+      child.kill()
+      done = true
+    }
+  })
+
+  // on error
+  child.stderr.on('data', (data) => {
+    console.error('initDevAndTest error', data.toString())
+  })
+
+  child.on('close', (code) => {
+    console.log(`Child process closed with code ${code}`)
+  })
+
+  // wait for done to be true
+  await new Promise((resolve) => {
+    const interval = setInterval(() => {
+      if (done) {
+        clearInterval(interval)
+        resolve(undefined)
+      }
+    }, 100)
+  })
+}

tsconfig.json

@@ -37,7 +37,7 @@
     ],
     "paths": {
       "@payload-config": [
-        "./test/admin/config.ts"
+        "./test/fields/config.ts"
       ],
       "@payloadcms/live-preview": [
         "./packages/live-preview/src"