chore(release): v3.0.0-alpha.35 [skip ci]

Co-authored-by: Will Viles <will@vil.es>

.idea/runConfigurations/Playwright_test.xml

@@ -0,0 +1,15 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="Playwright test" type="JavaScriptTestRunnerPlaywright">
+    <node-interpreter value="project" />
+    <playwright-package value="$PROJECT_DIR$/node_modules/playwright" />
+    <working-dir value="$PROJECT_DIR$" />
+    <envs />
+    <scope-kind value="TEST" />
+    <test-file value="$PROJECT_DIR$/test/_community/e2e.spec.ts" />
+    <test-names>
+      <test-name value="Admin Panel" />
+      <test-name value="example test" />
+    </test-names>
+    <method v="2" />
+  </configuration>
+</component>

.vscode/launch.json

@@ -2,6 +2,13 @@
   // Use IntelliSense to learn about possible attributes.
   // Hover to view descriptions of existing attributes.
   "configurations": [
+    {
+      "command": "pnpm generate:types",
+      "name": "Generate Types CLI",
+      "request": "launch",
+      "type": "node-terminal",
+      "cwd": "${workspaceFolder}"
+    },
     {
       "command": "pnpm run dev _community -- --no-turbo",
       "cwd": "${workspaceFolder}",
@@ -102,17 +109,6 @@
       "request": "launch",
       "type": "node-terminal"
     },
-    {
-      "command": "ts-node ./packages/payload/src/bin/index.ts generate:types",
-      "env": {
-        "PAYLOAD_CONFIG_PATH": "test/_community/config.ts",
-        "DISABLE_SWC": "true" // SWC messes up debugging the bin scripts
-      },
-      "name": "Generate Types CLI",
-      "outputCapture": "std",
-      "request": "launch",
-      "type": "node-terminal"
-    },
     {
       "command": "ts-node ./packages/payload/src/bin/index.ts migrate:status",
       "env": {

.vscode/settings.json

@@ -40,25 +40,5 @@
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": "explicit"
     }
-  },
-  "workbench.colorCustomizations": {
-    "activityBar.activeBackground": "#8cb5b6",
-    "activityBar.background": "#8cb5b6",
-    "activityBar.foreground": "#15202b",
-    "activityBar.inactiveForeground": "#15202b99",
-    "activityBarBadge.background": "#9c639b",
-    "activityBarBadge.foreground": "#e7e7e7",
-    "commandCenter.border": "#15202b99",
-    "sash.hoverBorder": "#8cb5b6",
-    "statusBar.background": "#6da1a2",
-    "statusBar.foreground": "#15202b",
-    "statusBarItem.hoverBackground": "#568586",
-    "statusBarItem.remoteBackground": "#6da1a2",
-    "statusBarItem.remoteForeground": "#15202b",
-    "titleBar.activeBackground": "#6da1a2",
-    "titleBar.activeForeground": "#15202b",
-    "titleBar.inactiveBackground": "#6da1a299",
-    "titleBar.inactiveForeground": "#15202b99"
-  },
-  "peacock.color": "#6da1a2"
+  }
 }

next.config.mjs

@@ -1,6 +1,7 @@
-import withPayload from './packages/next/src/withPayload.js'
 import bundleAnalyzer from '@next/bundle-analyzer'
 
+import withPayload from './packages/next/src/withPayload.js'
+
 const withBundleAnalyzer = bundleAnalyzer({
   enabled: process.env.ANALYZE === 'true',
 })
@@ -8,14 +9,6 @@ const withBundleAnalyzer = bundleAnalyzer({
 export default withBundleAnalyzer(
   withPayload({
     reactStrictMode: false,
-    webpack: (webpackConfig) => {
-      webpackConfig.resolve.extensionAlias = {
-        '.js': ['.ts', '.tsx', '.js', '.jsx'],
-        '.mjs': ['.mts', '.mjs'],
-        '.cjs': ['.cts', '.cjs'],
-      }
-      return webpackConfig
-    },
     async redirects() {
       return [
         {
@@ -25,5 +18,13 @@ export default withBundleAnalyzer(
         },
       ]
     },
+    webpack: (webpackConfig) => {
+      webpackConfig.resolve.extensionAlias = {
+        '.cjs': ['.cts', '.cjs'],
+        '.js': ['.ts', '.tsx', '.js', '.jsx'],
+        '.mjs': ['.mts', '.mjs'],
+      }
+      return webpackConfig
+    },
   }),
 )

package.json

@@ -1,6 +1,6 @@
 {
   "name": "payload-monorepo",
-  "version": "3.0.0-alpha.34",
+  "version": "3.0.0-alpha.35",
   "private": true,
   "type": "module",
   "workspaces:": [
@@ -40,13 +40,14 @@
     "clean:build": "find . \\( -type d \\( -name dist -o -name .cache -o -name .next -o -name .turbo \\) -o -type f -name tsconfig.tsbuildinfo \\) -not -path '*/node_modules/*' -exec rm -rf {} +",
     "clean:all": "find . \\( -type d \\( -name node_modules -o -name dist -o -name .cache -o -name .next -o -name .turbo \\) -o -type f -name tsconfig.tsbuildinfo \\) -exec rm -rf {} +",
     "dev": "cross-env node --no-deprecation ./test/dev.js",
-    "dev:generate-graphql-schema": "NODE_OPTIONS=--no-deprecation tsx ./test/generateGraphQLSchema.ts",
-    "dev:generate-types": "NODE_OPTIONS=--no-deprecation tsx ./test/generateTypes.ts",
+    "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",
     "dev:postgres": "pnpm --filter payload run dev:postgres",
     "docker:restart": "pnpm docker:stop --remove-orphans && pnpm docker:start",
     "docker:start": "docker-compose -f packages/plugin-cloud-storage/docker-compose.yml up -d",
     "docker:stop": "docker-compose -f packages/plugin-cloud-storage/docker-compose.yml down",
     "fix": "eslint \"packages/**/*.ts\" --fix",
+    "generate:types": "PAYLOAD_CONFIG_PATH=./test/_community/config.ts node --no-deprecation ./packages/payload/bin.js generate:types",
     "lint": "eslint \"packages/**/*.ts\"",
     "lint-staged": "lint-staged",
     "prepare": "husky install",
@@ -72,7 +73,6 @@
     "@playwright/test": "1.42.1",
     "@swc/cli": "^0.1.62",
     "@swc/jest": "0.2.36",
-    "@swc/register": "0.1.10",
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "14.2.1",
     "@types/concat-stream": "^2.0.1",
@@ -122,6 +122,8 @@
     "nodemon": "3.0.3",
     "pino": "8.15.0",
     "pino-pretty": "10.2.0",
+    "playwright": "file:playwright-1.43.0-next.tgz",
+    "playwright-core": "file:playwright-core-1.43.0-next.tgz",
     "prettier": "^3.0.3",
     "prompts": "2.4.2",
     "qs": "6.11.2",
@@ -136,6 +138,7 @@
     "slash": "3.0.0",
     "slate": "0.91.4",
     "tempfile": "^3.0.0",
+    "ts-node": "10.9.1",
     "tsx": "^4.7.1",
     "turbo": "^1.12.5",
     "typescript": "5.2.2",
@@ -168,7 +171,9 @@
       "graphql": "^16.8.1",
       "react": "$react",
       "react-dom": "$react-dom",
-      "typescript": "$typescript"
+      "typescript": "$typescript",
+      "playwright": "file:playwright-1.43.0-next.tgz",
+      "playwright-core": "file:playwright-core-1.43.0-next.tgz"
     },
     "allowedDeprecatedVersions": {
       "uuid": "3.4.0",

packages/db-mongodb/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/db-mongodb",
-  "version": "3.0.0-alpha.34",
+  "version": "3.0.0-alpha.35",
   "description": "The officially supported MongoDB database adapter for Payload - Update 2",
   "repository": "https://github.com/payloadcms/payload",
   "license": "MIT",

packages/db-postgres/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/db-postgres",
-  "version": "3.0.0-alpha.34",
+  "version": "3.0.0-alpha.35",
   "description": "The officially supported Postgres database adapter for Payload",
   "repository": "https://github.com/payloadcms/payload",
   "license": "MIT",

packages/db-postgres/src/connect.ts

@@ -4,7 +4,7 @@ import type { Connect } from 'payload/database'
 import { eq, sql } from 'drizzle-orm'
 import { drizzle } from 'drizzle-orm/node-postgres'
 import { numeric, timestamp, varchar } from 'drizzle-orm/pg-core'
-import { Pool } from 'pg'
+import pg from 'pg'
 import prompts from 'prompts'
 
 import type { PostgresAdapter } from './types.js'
@@ -61,7 +61,7 @@ export const connect: Connect = async function connect(
   }
 
   try {
-    this.pool = new Pool(this.poolOptions)
+    this.pool = new pg.Pool(this.poolOptions)
     await connectWithReconnect({ adapter: this, payload: this.payload })
 
     const logger = this.logger || false

packages/db-postgres/src/utilities/parseError.ts

@@ -1,4 +1,5 @@
-import { DatabaseError } from 'pg'
+import pg from 'pg'
+const { DatabaseError } = pg
 
 /**
  * Format error message with hint if available

packages/graphql/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/graphql",
-  "version": "3.0.0-alpha.34",
+  "version": "3.0.0-alpha.35",
   "main": "./src/index.ts",
   "types": "./src/index.d.ts",
   "type": "module",

packages/next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/next",
-  "version": "3.0.0-alpha.34",
+  "version": "3.0.0-alpha.35",
   "main": "./src/index.ts",
   "types": "./src/index.d.ts",
   "type": "module",

packages/next/src/utilities/getDataAndFile.ts

@@ -15,7 +15,7 @@ export const getDataAndFile: GetDataAndFile = async ({ collection, config, reque
   let file: CustomPayloadRequest['file'] = undefined
 
   if (['PATCH', 'POST', 'PUT'].includes(request.method.toUpperCase()) && request.body) {
-    const [contentType] = request.headers.get('Content-Type').split(';')
+    const [contentType] = (request.headers.get('Content-Type') || '').split(';')
 
     if (contentType === 'application/json') {
       data = await request.json()

packages/next/src/views/Account/index.tsx

@@ -3,6 +3,7 @@ import type { Data, DocumentPreferences, ServerSideEditViewProps } from 'payload
 import {
   DocumentHeader,
   DocumentInfoProvider,
+  FormQueryParamsProvider,
   HydrateClientUser,
   RenderCustomComponent,
   buildStateFromSchema,
@@ -22,6 +23,7 @@ export { generateAccountMetadata } from './meta.js'
 export const Account: React.FC<AdminViewProps> = async ({ initPageResult, searchParams }) => {
   const {
     permissions,
+    locale,
     req: {
       i18n,
       payload,
@@ -118,13 +120,22 @@ export const Account: React.FC<AdminViewProps> = async ({ initPageResult, search
           i18n={i18n}
         />
         <HydrateClientUser permissions={permissions} user={user} />
-        <RenderCustomComponent
-          CustomComponent={
-            typeof CustomAccountComponent === 'function' ? CustomAccountComponent : undefined
-          }
-          DefaultComponent={EditView}
-          componentProps={serverSideProps}
-        />
+        <FormQueryParamsProvider
+          initialParams={{
+            depth: 0,
+            'fallback-locale': 'null',
+            locale: locale.code,
+            uploadEdits: undefined,
+          }}
+        >
+          <RenderCustomComponent
+            CustomComponent={
+              typeof CustomAccountComponent === 'function' ? CustomAccountComponent : undefined
+            }
+            DefaultComponent={EditView}
+            componentProps={serverSideProps}
+          />
+        </FormQueryParamsProvider>
       </DocumentInfoProvider>
     )
   }

packages/payload/bin.cjs

@@ -1,41 +0,0 @@
-#!/usr/bin/env node
-
-const { getTsconfig } = require('get-tsconfig')
-const path = require('path')
-const swcRegister = require('@swc/register')
-
-const tsConfig = getTsconfig()
-
-const swcOptions = {
-  ignore: [/.*[\\/]node_modules[\\/].*/],
-  jsc: {
-    baseUrl: path.resolve(),
-    parser: {
-      syntax: 'typescript',
-      tsx: true,
-    },
-    paths: undefined,
-  },
-  module: {
-    type: 'es6',
-  },
-  sourceMaps: 'inline',
-}
-if (tsConfig?.config?.compilerOptions?.paths) {
-  swcOptions.jsc.paths = tsConfig.config.compilerOptions.paths
-  if (tsConfig?.config?.compilerOptions?.baseUrl) {
-    swcOptions.jsc.baseUrl = path.resolve(tsConfig.config.compilerOptions.baseUrl)
-  }
-}
-// Allow disabling SWC for debugging
-if (process.env.DISABLE_SWC !== 'true') {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-expect-error - bad @swc/register types
-  swcRegister(swcOptions)
-}
-
-const bin = async () => {
-  await import('./dist/bin/index.js')
-}
-
-bin()

packages/payload/bin.js

@@ -0,0 +1,18 @@
+#!/usr/bin/env node
+
+import { register } from 'node:module'
+import path from 'node:path'
+import { fileURLToPath, pathToFileURL } from 'node:url'
+
+import { bin } from './dist/bin/index.js'
+
+// Allow disabling SWC for debugging
+if (process.env.DISABLE_SWC !== 'true') {
+  const filename = fileURLToPath(import.meta.url)
+  const dirname = path.dirname(filename)
+  const url = pathToFileURL(dirname).toString() + '/'
+
+  register('./dist/bin/register/index.js', url)
+}
+
+bin()

packages/payload/package.json

@@ -1,13 +1,13 @@
 {
   "name": "payload",
-  "version": "3.0.0-alpha.34",
+  "version": "3.0.0-alpha.35",
   "description": "Node, React and MongoDB Headless CMS and Application Framework",
   "license": "MIT",
   "main": "./src/index.js",
   "types": "./src/index.ts",
   "type": "module",
   "bin": {
-    "payload": "bin.cjs"
+    "payload": "bin.js"
   },
   "exports": {
     ".": {
@@ -43,11 +43,14 @@
   },
   "dependencies": {
     "@payloadcms/translations": "workspace:*",
+    "@swc-node/core": "^1.13.0",
+    "@swc-node/sourcemap-support": "^0.5.0",
     "bson-objectid": "2.0.4",
     "conf": "10.2.0",
     "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",
     "get-tsconfig": "^4.7.2",
@@ -62,6 +65,7 @@
     "nodemailer": "6.9.10",
     "pino": "8.15.0",
     "pino-pretty": "10.2.0",
+    "pirates": "^4.0.6",
     "pluralize": "8.0.0",
     "sanitize-filename": "1.6.3",
     "scheduler": "0.23.0",

packages/payload/src/bin/generateTypes.ts

@@ -4,7 +4,6 @@ import { compile } from 'json-schema-to-typescript'
 
 import type { SanitizedConfig } from '../config/types.js'
 
-import loadConfig from '../config/load.js'
 import { configToJSONSchema } from '../utilities/configToJSONSchema.js'
 import Logger from '../utilities/logger.js'
 
@@ -36,13 +35,3 @@ export function generateTypes(config: SanitizedConfig): void {
     logger.info(`Types written to ${outputFile}`)
   })
 }
-
-// when generateTypes.js is launched directly
-if (module.id === require.main.id) {
-  const loadConfigAndGenerateTypes = async () => {
-    const config = await loadConfig()
-    generateTypes(config)
-  }
-
-  loadConfigAndGenerateTypes()
-}

packages/payload/src/bin/index.ts

@@ -1,24 +1,30 @@
+/* eslint-disable no-console */
 import minimist from 'minimist'
 
 import type { BinScript } from '../config/types.js'
 
-import loadConfig from '../config/load.js'
+import { findConfig } from '../config/find.js'
 import { generateTypes } from './generateTypes.js'
 import { loadEnv } from './loadEnv.js'
 import { migrate } from './migrate.js'
 
-loadEnv()
+export const bin = async () => {
+  loadEnv()
+  const configPath = findConfig()
+  const configPromise = await import(configPath)
+  let config = await configPromise
+  if (config.default) config = await config.default
 
-const executeBin = async () => {
   const args = minimist(process.argv.slice(2))
-  const scriptIndex = args._.findIndex((x) => x === 'build')
-  const script = scriptIndex === -1 ? args._[0] : args._[scriptIndex]
-  const config = await loadConfig()
-  const userBinScript = config.bin.find(({ key }) => key === script)
+  const script = (typeof args._[0] === 'string' ? args._[0] : '').toLowerCase()
+
+  const userBinScript = Array.isArray(config.bin)
+    ? config.bin.find(({ key }) => key === script)
+    : false
 
   if (userBinScript) {
     try {
-      const script: BinScript = require(userBinScript.scriptPath)
+      const script: BinScript = await import(userBinScript.scriptPath)
       await script(config)
     } catch (err) {
       console.log(`Could not find associated bin script for the ${userBinScript.key} command`)
@@ -29,19 +35,13 @@ const executeBin = async () => {
   }
 
   if (script.startsWith('migrate')) {
-    migrate(args).then(() => process.exit(0))
-  } else {
-    switch (script.toLowerCase()) {
-      case 'generate:types': {
-        generateTypes(config)
-        break
-      }
-
-      default:
-        console.log(`Unknown script "${script}".`)
-        break
-    }
+    return migrate({ config, parsedArgs: args }).then(() => process.exit(0))
   }
-}
 
-executeBin()
+  if (script === 'generate:types') {
+    return generateTypes(config)
+  }
+
+  console.log(`Unknown script: "${script}".`)
+  process.exit(1)
+}

packages/payload/src/bin/migrate.ts

@@ -1,8 +1,7 @@
 import type { ParsedArgs } from 'minimist'
 
-import minimist from 'minimist'
+import type { SanitizedConfig } from '../exports/types.js'
 
-import loadConfig from '../config/load.js'
 import payload from '../index.js'
 import { prettySyncLoggerDestination } from '../utilities/logger.js'
 
@@ -27,7 +26,12 @@ const availableCommands = [
 
 const availableCommandsMsg = `Available commands: ${availableCommands.join(', ')}`
 
-export const migrate = async (parsedArgs: ParsedArgs): Promise<void> => {
+type Args = {
+  config: SanitizedConfig
+  parsedArgs: ParsedArgs
+}
+
+export const migrate = async ({ config, parsedArgs }: Args): Promise<void> => {
   const { _: args, file, forceAcceptWarning, help } = parsedArgs
   if (help) {
     // eslint-disable-next-line no-console
@@ -39,7 +43,7 @@ export const migrate = async (parsedArgs: ParsedArgs): Promise<void> => {
 
   // Barebones instance to access database adapter
   await payload.init({
-    config: loadConfig(),
+    config,
     disableOnInit: true,
     ...prettySyncLogger,
   })
@@ -98,12 +102,3 @@ export const migrate = async (parsedArgs: ParsedArgs): Promise<void> => {
 
   payload.logger.info('Done.')
 }
-
-// When launched directly call migrate
-if (module.id === require.main.id) {
-  const args = minimist(process.argv.slice(2))
-  // eslint-disable-next-line @typescript-eslint/no-floating-promises
-  migrate(args).then(() => {
-    process.exit(0)
-  })
-}

packages/payload/src/bin/register/clientExtensions.ts

@@ -1,4 +1,4 @@
-export const clientFiles = [
+export const CLIENT_EXTENSIONS = [
   '.scss',
   '.css',
   '.svg',

packages/payload/src/bin/register/index.ts

@@ -0,0 +1,152 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+import { getTsconfig } from 'get-tsconfig'
+import path from 'path'
+import ts from 'typescript'
+import { fileURLToPath, pathToFileURL } from 'url'
+
+import { CLIENT_EXTENSIONS } from './clientExtensions.js'
+import { compile } from './register.js'
+
+interface ResolveContext {
+  conditions: string[]
+  parentURL: string | undefined
+}
+interface ResolveResult {
+  format?: string
+  shortCircuit?: boolean
+  url: string
+}
+type ResolveArgs = [
+  specifier: string,
+  context?: ResolveContext,
+  nextResolve?: (...args: ResolveArgs) => Promise<ResolveResult>,
+]
+type ResolveFn = (...args: Required<ResolveArgs>) => Promise<ResolveResult>
+
+const locatedConfig = getTsconfig()
+const tsconfig = locatedConfig.config.compilerOptions as unknown as ts.CompilerOptions
+
+tsconfig.module = ts.ModuleKind.ESNext
+tsconfig.moduleResolution = ts.ModuleResolutionKind.NodeNext
+
+const moduleResolutionCache = ts.createModuleResolutionCache(
+  ts.sys.getCurrentDirectory(),
+  (x) => x,
+  tsconfig,
+)
+const host: ts.ModuleResolutionHost = {
+  fileExists: ts.sys.fileExists,
+  readFile: ts.sys.readFile,
+}
+const EXTENSIONS: string[] = [ts.Extension.Ts, ts.Extension.Tsx, ts.Extension.Dts, ts.Extension.Mts]
+
+export const resolve: ResolveFn = async (specifier, context, nextResolve) => {
+  const isTS = EXTENSIONS.some((ext) => specifier.endsWith(ext))
+  const isClient = CLIENT_EXTENSIONS.some((ext) => specifier.endsWith(ext))
+
+  if (isClient) {
+    const nextResult = await nextResolve(specifier, context, nextResolve)
+    const specifierSegments = specifier.split('.')
+
+    return {
+      format: '.' + specifierSegments[specifierSegments.length - 1],
+      shortCircuit: true,
+      url: nextResult.url,
+    }
+  }
+
+  // entrypoint
+  if (!context.parentURL) {
+    return {
+      format: isTS ? 'ts' : undefined,
+      shortCircuit: true,
+      url: specifier,
+    }
+  }
+
+  // import/require from external library
+  if (context.parentURL.includes('/node_modules/') && !isTS) {
+    return nextResolve(specifier)
+  }
+
+  const { resolvedModule } = ts.resolveModuleName(
+    specifier,
+    fileURLToPath(context.parentURL),
+    tsconfig,
+    host,
+    moduleResolutionCache,
+  )
+
+  // import from local project to local project TS file
+  if (
+    resolvedModule &&
+    !resolvedModule.resolvedFileName.includes('/node_modules/') &&
+    EXTENSIONS.includes(resolvedModule.extension)
+  ) {
+    return {
+      format: 'ts',
+      shortCircuit: true,
+      url: pathToFileURL(resolvedModule.resolvedFileName).href,
+    }
+  }
+
+  // import from local project to either:
+  // - something TS couldn't resolve
+  // - external library
+  // - local project non-TS file
+  return nextResolve(specifier)
+}
+
+interface LoadContext {
+  conditions: string[]
+  format: null | string | undefined
+}
+interface LoadResult {
+  format: string
+  shortCircuit?: boolean
+  source: ArrayBuffer | SharedArrayBuffer | Uint8Array | string
+}
+type LoadArgs = [
+  url: string,
+  context: LoadContext,
+  nextLoad?: (...args: LoadArgs) => Promise<LoadResult>,
+]
+type LoadFn = (...args: Required<LoadArgs>) => Promise<LoadResult>
+
+const swcOptions = {
+  ...tsconfig,
+  baseUrl: path.resolve(''),
+  paths: undefined,
+}
+
+if (tsconfig.paths) {
+  swcOptions.paths = tsconfig.paths
+  if (tsconfig.baseUrl) {
+    swcOptions.baseUrl = path.resolve(tsconfig.baseUrl)
+  }
+}
+
+export const load: LoadFn = async (url, context, nextLoad) => {
+  if (CLIENT_EXTENSIONS.some((e) => context.format === e)) {
+    const rawSource = '{}'
+
+    return {
+      format: 'json',
+      shortCircuit: true,
+      source: rawSource,
+    }
+  }
+
+  if (context.format === 'ts') {
+    const { source } = await nextLoad(url, context)
+    const code = typeof source === 'string' ? source : Buffer.from(source).toString()
+    const compiled = await compile(code, fileURLToPath(url), swcOptions, true)
+    return {
+      format: 'module',
+      shortCircuit: true,
+      source: compiled,
+    }
+  } else {
+    return nextLoad(url, context)
+  }
+}

packages/payload/src/bin/register/read-default-tsconfig.ts

@@ -0,0 +1,108 @@
+import type { Options } from '@swc-node/core'
+
+import { resolve } from 'path'
+import ts from 'typescript'
+
+function toTsTarget(target: ts.ScriptTarget): Options['target'] {
+  switch (target) {
+    case ts.ScriptTarget.ES3:
+      return 'es3'
+    case ts.ScriptTarget.ES5:
+      return 'es5'
+    case ts.ScriptTarget.ES2015:
+      return 'es2015'
+    case ts.ScriptTarget.ES2016:
+      return 'es2016'
+    case ts.ScriptTarget.ES2017:
+      return 'es2017'
+    case ts.ScriptTarget.ES2018:
+      return 'es2018'
+    case ts.ScriptTarget.ES2019:
+      return 'es2019'
+    case ts.ScriptTarget.ES2020:
+      return 'es2020'
+    case ts.ScriptTarget.ES2021:
+      return 'es2021'
+    case ts.ScriptTarget.ES2022:
+    case ts.ScriptTarget.ESNext:
+    case ts.ScriptTarget.Latest:
+      return 'es2022'
+    case ts.ScriptTarget.JSON:
+      return 'es5'
+  }
+}
+
+function toModule(moduleKind: ts.ModuleKind) {
+  switch (moduleKind) {
+    case ts.ModuleKind.CommonJS:
+      return 'commonjs'
+    case ts.ModuleKind.UMD:
+      return 'umd'
+    case ts.ModuleKind.AMD:
+      return 'amd'
+    case ts.ModuleKind.ES2015:
+    case ts.ModuleKind.ES2020:
+    case ts.ModuleKind.ES2022:
+    case ts.ModuleKind.ESNext:
+    case ts.ModuleKind.Node16:
+    case ts.ModuleKind.NodeNext:
+    case ts.ModuleKind.None:
+      return 'es6'
+    case ts.ModuleKind.System:
+      throw new TypeError('Do not support system kind module')
+  }
+}
+
+/**
+ * The default value for useDefineForClassFields depends on the emit target
+ * @see https://www.typescriptlang.org/tsconfig#useDefineForClassFields
+ */
+function getUseDefineForClassFields(
+  compilerOptions: ts.CompilerOptions,
+  target: ts.ScriptTarget,
+): boolean {
+  return compilerOptions.useDefineForClassFields ?? target >= ts.ScriptTarget.ES2022
+}
+
+export function tsCompilerOptionsToSwcConfig(
+  options: ts.CompilerOptions,
+  filename: string,
+): Options {
+  const isJsx = filename.endsWith('.tsx') || filename.endsWith('.jsx') || Boolean(options.jsx)
+  const target = options.target ?? ts.ScriptTarget.ES2018
+  return {
+    baseUrl: options.baseUrl ? resolve(options.baseUrl) : undefined,
+    dynamicImport: true,
+    emitDecoratorMetadata: options.emitDecoratorMetadata ?? false,
+    esModuleInterop: options.esModuleInterop ?? false,
+    experimentalDecorators: options.experimentalDecorators ?? false,
+    externalHelpers: Boolean(options.importHelpers),
+    ignoreDynamic: Boolean(process.env.SWC_NODE_IGNORE_DYNAMIC),
+    jsx: isJsx,
+    keepClassNames: true,
+    module: toModule(options.module ?? ts.ModuleKind.ES2015),
+    paths: Object.fromEntries(
+      Object.entries(options.paths ?? {}).map(([aliasKey, aliasPaths]) => [
+        aliasKey,
+        (aliasPaths ?? []).map((path) => resolve(options.baseUrl ?? './', path)),
+      ]),
+    ) as Options['paths'],
+    react:
+      options.jsxFactory ?? options.jsxFragmentFactory ?? options.jsx ?? options.jsxImportSource
+        ? {
+            importSource: options.jsxImportSource ?? 'react',
+            pragma: options.jsxFactory,
+            pragmaFrag: options.jsxFragmentFactory,
+            runtime: (options.jsx ?? 0) >= ts.JsxEmit.ReactJSX ? 'automatic' : 'classic',
+            useBuiltins: true,
+          }
+        : undefined,
+    sourcemap: options.sourceMap && options.inlineSourceMap ? 'inline' : Boolean(options.sourceMap),
+    swc: {
+      inputSourceMap: options.inlineSourceMap,
+      sourceRoot: options.sourceRoot,
+    },
+    target: toTsTarget(target),
+    useDefineForClassFields: getUseDefineForClassFields(options, target),
+  }
+}

packages/payload/src/bin/register/register.ts

@@ -0,0 +1,114 @@
+import type { Options } from '@swc-node/core'
+
+import { transform, transformSync } from '@swc-node/core'
+import { SourcemapMap, installSourceMapSupport } from '@swc-node/sourcemap-support'
+import { getTsconfig } from 'get-tsconfig'
+import { platform } from 'os'
+import { resolve } from 'path'
+import { addHook } from 'pirates'
+import * as ts from 'typescript'
+
+import { tsCompilerOptionsToSwcConfig } from './read-default-tsconfig.js'
+
+const DEFAULT_EXTENSIONS = ['.js', '.jsx', '.es6', '.es', '.mjs', '.ts', '.tsx']
+const PLATFORM = platform()
+
+const injectInlineSourceMap = ({
+  code,
+  filename,
+  map,
+}: {
+  code: string
+  filename: string
+  map: string | undefined
+}): string => {
+  if (map) {
+    SourcemapMap.set(filename, map)
+    const base64Map = Buffer.from(map, 'utf8').toString('base64')
+    const sourceMapContent = `//# sourceMappingURL=data:application/json;charset=utf-8;base64,${base64Map}`
+    return `${code}\n${sourceMapContent}`
+  }
+  return code
+}
+
+export function compile(
+  sourcecode: string,
+  filename: string,
+  options: ts.CompilerOptions & { fallbackToTs?: (filename: string) => boolean },
+): string
+
+export function compile(
+  sourcecode: string,
+  filename: string,
+  options: ts.CompilerOptions & { fallbackToTs?: (filename: string) => boolean },
+  async: false,
+): string
+
+export function compile(
+  sourcecode: string,
+  filename: string,
+  options: ts.CompilerOptions & { fallbackToTs?: (filename: string) => boolean },
+  async: true,
+): Promise<string>
+
+export function compile(
+  sourcecode: string,
+  filename: string,
+  options: ts.CompilerOptions & { fallbackToTs?: (filename: string) => boolean },
+  async: boolean,
+): Promise<string> | string
+
+export function compile(
+  sourcecode: string,
+  filename: string,
+  options: ts.CompilerOptions & { fallbackToTs?: (filename: string) => boolean },
+  async = false,
+) {
+  if (filename.endsWith('.d.ts')) {
+    return ''
+  }
+  if (options.files && (options.files as string[]).length) {
+    if (
+      PLATFORM === 'win32' &&
+      (options.files as string[]).every((file) => filename !== resolve(process.cwd(), file))
+    ) {
+      return sourcecode
+    }
+    if (
+      PLATFORM !== 'win32' &&
+      (options.files as string[]).every((file) => !filename.endsWith(file))
+    ) {
+      return sourcecode
+    }
+  }
+  if (options && typeof options.fallbackToTs === 'function' && options.fallbackToTs(filename)) {
+    delete options.fallbackToTs
+    const { outputText, sourceMapText } = ts.transpileModule(sourcecode, {
+      compilerOptions: options,
+      fileName: filename,
+    })
+    return injectInlineSourceMap({ code: outputText, filename, map: sourceMapText })
+  }
+
+  const swcRegisterConfig: Options = tsCompilerOptionsToSwcConfig(options, filename)
+
+  if (async) {
+    return transform(sourcecode, filename, swcRegisterConfig).then(({ code, map }) => {
+      return injectInlineSourceMap({ code, filename, map })
+    })
+  } else {
+    const { code, map } = transformSync(sourcecode, filename, swcRegisterConfig)
+    return injectInlineSourceMap({ code, filename, map })
+  }
+}
+
+export function register(options: Partial<ts.CompilerOptions> = {}, hookOpts = {}) {
+  const locatedConfig = getTsconfig()
+  const tsconfig = locatedConfig.config.compilerOptions as unknown as ts.CompilerOptions
+  options = tsconfig
+  installSourceMapSupport()
+  return addHook((code, filename) => compile(code, filename, options), {
+    exts: DEFAULT_EXTENSIONS,
+    ...hookOpts,
+  })
+}

packages/payload/src/config/find.ts

@@ -38,7 +38,7 @@ const getTSConfigPaths = (): { outPath: string; srcPath: string } => {
  * @returns The absolute path to the Payload configuration file.
  * @throws An error if no configuration file is found.
  */
-const findConfig = (): string => {
+export const findConfig = (): string => {
   // If the developer has specified a config path,
   // format it if relative and use it directly if absolute
   if (process.env.PAYLOAD_CONFIG_PATH) {
@@ -101,5 +101,3 @@ const findConfig = (): string => {
     'Error: cannot find Payload config. Please create a configuration file located at the root of your current working directory called "payload.config.js" or "payload.config.ts".',
   )
 }
-
-export default findConfig

packages/payload/src/config/load.ts

@@ -1,26 +1,47 @@
 /* eslint-disable import/no-dynamic-require */
+import type pino from 'pino'
+
 /* eslint-disable global-require */
+import { createRequire } from 'module'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import path from 'path'
 
 import type { SanitizedConfig } from './types.js'
 
-import { clientFiles } from './clientFiles.js'
-import findConfig from './find.js'
+import { CLIENT_EXTENSIONS } from '../bin/register/clientExtensions.js'
+import Logger from '../utilities/logger.js'
+import { findConfig } from './find.js'
+import validate from './validate.js'
+
+const require = createRequire(import.meta.url)
+
+const loadConfig = async (logger?: pino.Logger): Promise<SanitizedConfig> => {
+  const localLogger = logger ?? Logger()
 
-const loadConfig = async (): Promise<SanitizedConfig> => {
   const configPath = findConfig()
 
-  clientFiles.forEach((ext) => {
+  CLIENT_EXTENSIONS.forEach((ext) => {
     require.extensions[ext] = () => null
   })
 
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const configPromise = require(configPath)
+  const configPromise = await import(configPath)
 
   let config = await configPromise
 
-  if (config.default) config = await config.default
+  if ('default' in config) config = await config.default
 
-  return config
+  if (process.env.NODE_ENV !== 'production') {
+    config = await validate(config, localLogger)
+  }
+
+  return {
+    ...config,
+    paths: {
+      config: configPath,
+      configDir: path.dirname(configPath),
+      rawConfig: configPath,
+    },
+  }
 }
 
 export default loadConfig

packages/plugin-cloud-storage/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@payloadcms/plugin-cloud-storage",
   "description": "The official cloud storage plugin for Payload CMS",
-  "version": "3.0.0-alpha.34",
+  "version": "3.0.0-alpha.35",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",

packages/plugin-cloud/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@payloadcms/plugin-cloud",
   "description": "The official Payload Cloud plugin",
-  "version": "3.0.0-alpha.34",
+  "version": "3.0.0-alpha.35",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",

packages/plugin-seo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/plugin-seo",
-  "version": "3.0.0-alpha.34",
+  "version": "3.0.0-alpha.35",
   "homepage:": "https://payloadcms.com",
   "repository": "git@github.com:payloadcms/plugin-seo.git",
   "description": "SEO plugin for Payload",

packages/richtext-lexical/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/richtext-lexical",
-  "version": "3.0.0-alpha.34",
+  "version": "3.0.0-alpha.35",
   "description": "The officially supported Lexical richtext adapter for Payload",
   "repository": "https://github.com/payloadcms/payload",
   "license": "MIT",

packages/richtext-lexical/src/cell/index.tsx

@@ -5,7 +5,8 @@ import { createHeadlessEditor } from '@lexical/headless'
 import { useTableCell } from '@payloadcms/ui/elements'
 import { useFieldPath } from '@payloadcms/ui/forms'
 import { useClientFunctions } from '@payloadcms/ui/providers'
-import { $getRoot } from 'lexical'
+import lexicalImport from 'lexical'
+const { $getRoot } = lexicalImport
 import React, { useEffect, useState } from 'react'
 
 import type { FeatureProviderClient } from '../field/features/types.js'

packages/richtext-lexical/src/field/features/align/feature.client.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { FORMAT_ELEMENT_COMMAND } from 'lexical'
+import lexicalImport from 'lexical'
+const { FORMAT_ELEMENT_COMMAND } = lexicalImport
 
 import type { FeatureProviderProviderClient } from '../types.js'
 

packages/richtext-lexical/src/field/features/blockquote/feature.client.tsx

@@ -1,8 +1,13 @@
 'use client'
 
-import { $createQuoteNode, QuoteNode } from '@lexical/rich-text'
-import { $setBlocksType } from '@lexical/selection'
-import { $getSelection } from 'lexical'
+import lexicalRichTextImport from '@lexical/rich-text'
+const { $createQuoteNode, QuoteNode } = lexicalRichTextImport
+
+import lexicalSelectionImport from '@lexical/selection'
+const { $setBlocksType } = lexicalSelectionImport
+
+import lexicalImport from 'lexical'
+const { $getSelection } = lexicalImport
 
 import type { FeatureProviderProviderClient } from '../types.js'
 

packages/richtext-lexical/src/field/features/blockquote/feature.server.ts

@@ -1,4 +1,5 @@
-import { QuoteNode, type SerializedQuoteNode } from '@lexical/rich-text'
+import lexicalRichTextImport, { type SerializedQuoteNode } from '@lexical/rich-text'
+const { QuoteNode } = lexicalRichTextImport
 
 import type { HTMLConverter } from '../converters/html/converter/types.js'
 import type { FeatureProviderProviderServer } from '../types.js'

packages/richtext-lexical/src/field/features/blockquote/markdownTransformer.ts

@@ -1,7 +1,11 @@
 import type { ElementTransformer } from '@lexical/markdown'
 
-import { $createQuoteNode, $isQuoteNode, QuoteNode } from '@lexical/rich-text'
-import { $createLineBreakNode } from 'lexical'
+import lexicalRichTextImport from '@lexical/rich-text'
+const { $createQuoteNode, $isQuoteNode, QuoteNode } = lexicalRichTextImport
+
+import lexicalImport from 'lexical'
+const { $createLineBreakNode } = lexicalImport
+
 export const MarkdownTransformer: ElementTransformer = {
   type: 'element',
   dependencies: [QuoteNode],

packages/richtext-lexical/src/field/features/blocks/component/BlockContent.tsx

@@ -3,7 +3,8 @@ import type { ReducedBlock } from '@payloadcms/ui/types'
 import type { FormState } from 'payload/types'
 import type { Data } from 'payload/types'
 
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
 import { getTranslation } from '@payloadcms/translations'
 import { RenderFields } from '@payloadcms/ui'
 import {
@@ -17,7 +18,8 @@ import {
   useTranslation,
 } from '@payloadcms/ui'
 import isDeepEqual from 'deep-equal'
-import { $getNodeByKey } from 'lexical'
+import lexicalImport from 'lexical'
+const { $getNodeByKey } = lexicalImport
 import React, { useCallback } from 'react'
 
 import type { SanitizedClientEditorConfig } from '../../../lexical/config/types.js'

packages/richtext-lexical/src/field/features/blocks/drawer/index.tsx

@@ -1,14 +1,13 @@
 'use client'
-import { useModal } from '@faceless-ui/modal'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
+import * as facelessUIImport from '@faceless-ui/modal'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
 import { BlocksDrawer, formatDrawerSlug, useEditDepth, useTranslation } from '@payloadcms/ui'
-import {
-  $getNodeByKey,
-  COMMAND_PRIORITY_EDITOR,
-  type LexicalCommand,
-  type LexicalEditor,
-  createCommand,
-} from 'lexical'
+import lexicalImport from 'lexical'
+const { $getNodeByKey, COMMAND_PRIORITY_EDITOR, createCommand } = lexicalImport
+
+import type { LexicalCommand, LexicalEditor } from 'lexical'
+
 import React, { useCallback, useEffect, useState } from 'react'
 
 import type { ClientComponentProps } from '../../types.js'
@@ -55,6 +54,8 @@ const insertBlock = ({
 }
 
 export const BlocksDrawerComponent: React.FC = () => {
+  const { useModal } = facelessUIImport
+
   const [editor] = useLexicalComposerContext()
   const { editorConfig, uuid } = useEditorConfigContext()
 

packages/richtext-lexical/src/field/features/blocks/nodes/BlocksNode.tsx

@@ -10,7 +10,8 @@ import type {
   Spread,
 } from 'lexical'
 
-import { DecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode.js'
+import lexicalDecoratorBlockNodeImport from '@lexical/react/LexicalDecoratorBlockNode.js'
+const { DecoratorBlockNode } = lexicalDecoratorBlockNodeImport
 import ObjectID from 'bson-objectid'
 import React from 'react'
 

packages/richtext-lexical/src/field/features/blocks/plugin/commands.ts

@@ -1,6 +1,7 @@
 import type { LexicalCommand } from 'lexical'
 
-import { createCommand } from 'lexical'
+import lexicalImport from 'lexical'
+const { createCommand } = lexicalImport
 
 import type { InsertBlockPayload } from './index.js'
 

packages/richtext-lexical/src/field/features/blocks/plugin/index.tsx

@@ -1,13 +1,17 @@
 'use client'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
-import { $insertNodeToNearestRoot, mergeRegister } from '@lexical/utils'
-import {
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
+import lexicalUtilsImport from '@lexical/utils'
+const { $insertNodeToNearestRoot, mergeRegister } = lexicalUtilsImport
+import lexicalImport from 'lexical'
+const {
   $getPreviousSelection,
   $getSelection,
   $isParagraphNode,
   $isRangeSelection,
   COMMAND_PRIORITY_EDITOR,
-} from 'lexical'
+} = lexicalImport
+
 import React, { useEffect } from 'react'
 
 import type { BlockFields } from '../nodes/BlocksNode.js'

packages/richtext-lexical/src/field/features/debug/testrecorder/plugin/index.tsx

@@ -1,8 +1,10 @@
 'use client'
 import type { BaseSelection, LexicalEditor } from 'lexical'
 
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
-import { $createParagraphNode, $createTextNode, $getRoot } from 'lexical'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
+import lexicalImport from 'lexical'
+const { $createParagraphNode, $createTextNode, $getRoot } = lexicalImport
 import * as React from 'react'
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
 

packages/richtext-lexical/src/field/features/debug/treeview/plugin/index.tsx

@@ -1,6 +1,8 @@
 'use client'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
-import { TreeView } from '@lexical/react/LexicalTreeView.js'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
+import lexicalTreeViewImport from '@lexical/react/LexicalTreeView.js'
+const { TreeView } = lexicalTreeViewImport
 import * as React from 'react'
 
 import './index.scss'

packages/richtext-lexical/src/field/features/format/bold/feature.client.tsx

@@ -1,5 +1,6 @@
 'use client'
-import { $isRangeSelection, FORMAT_TEXT_COMMAND } from 'lexical'
+import lexicalImport from 'lexical'
+const { $isRangeSelection, FORMAT_TEXT_COMMAND } = lexicalImport
 
 import type { FeatureProviderProviderClient } from '../../types.js'
 

packages/richtext-lexical/src/field/features/format/inlinecode/feature.client.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { $isRangeSelection, FORMAT_TEXT_COMMAND } from 'lexical'
+import lexicalImport from 'lexical'
+const { $isRangeSelection, FORMAT_TEXT_COMMAND } = lexicalImport
 
 import type { FeatureProviderProviderClient } from '../../types.js'
 

packages/richtext-lexical/src/field/features/format/italic/feature.client.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { $isRangeSelection, FORMAT_TEXT_COMMAND } from 'lexical'
+import lexicalImport from 'lexical'
+const { $isRangeSelection, FORMAT_TEXT_COMMAND } = lexicalImport
 
 import type { FeatureProviderProviderClient } from '../../types.js'
 

packages/richtext-lexical/src/field/features/format/strikethrough/feature.client.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { $isRangeSelection, FORMAT_TEXT_COMMAND } from 'lexical'
+import lexicalImport from 'lexical'
+const { $isRangeSelection, FORMAT_TEXT_COMMAND } = lexicalImport
 
 import type { FeatureProviderProviderClient } from '../../types.js'
 

packages/richtext-lexical/src/field/features/format/subscript/feature.client.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { $isRangeSelection, FORMAT_TEXT_COMMAND } from 'lexical'
+import lexicalImport from 'lexical'
+const { $isRangeSelection, FORMAT_TEXT_COMMAND } = lexicalImport
 
 import type { FeatureProviderProviderClient } from '../../types.js'
 

packages/richtext-lexical/src/field/features/format/superscript/feature.client.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { $isRangeSelection, FORMAT_TEXT_COMMAND } from 'lexical'
+import lexicalImport from 'lexical'
+const { $isRangeSelection, FORMAT_TEXT_COMMAND } = lexicalImport
 
 import type { FeatureProviderProviderClient } from '../../types.js'
 

packages/richtext-lexical/src/field/features/format/underline/feature.client.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { $isRangeSelection, FORMAT_TEXT_COMMAND } from 'lexical'
+import lexicalImport from 'lexical'
+const { $isRangeSelection, FORMAT_TEXT_COMMAND } = lexicalImport
 
 import type { FeatureProviderProviderClient } from '../../types.js'
 

packages/richtext-lexical/src/field/features/heading/feature.client.tsx

@@ -2,10 +2,14 @@
 
 import type { HeadingTagType } from '@lexical/rich-text'
 
-import { HeadingNode } from '@lexical/rich-text'
-import { $createHeadingNode } from '@lexical/rich-text'
-import { $setBlocksType } from '@lexical/selection'
-import { $getSelection } from 'lexical'
+import lexicalRichTextImport from '@lexical/rich-text'
+const { $createHeadingNode, HeadingNode } = lexicalRichTextImport
+
+import lexicalSelectionImport from '@lexical/selection'
+const { $setBlocksType } = lexicalSelectionImport
+
+import lexicalImport from 'lexical'
+const { $getSelection } = lexicalImport
 
 import type { FeatureProviderProviderClient } from '../types.js'
 import type { HeadingFeatureProps } from './feature.server.js'

packages/richtext-lexical/src/field/features/heading/feature.server.ts

@@ -1,6 +1,7 @@
-import type { HeadingTagType } from '@lexical/rich-text'
+import type { HeadingTagType, SerializedHeadingNode } from '@lexical/rich-text'
 
-import { HeadingNode, type SerializedHeadingNode } from '@lexical/rich-text'
+import lexicalRichTextImport from '@lexical/rich-text'
+const { HeadingNode } = lexicalRichTextImport
 
 import type { HTMLConverter } from '../converters/html/converter/types.js'
 import type { FeatureProviderProviderServer } from '../types.js'

packages/richtext-lexical/src/field/features/heading/markdownTransformer.ts

@@ -1,7 +1,8 @@
 import type { ElementTransformer } from '@lexical/markdown'
 import type { HeadingTagType } from '@lexical/rich-text'
 
-import { $createHeadingNode, $isHeadingNode, HeadingNode } from '@lexical/rich-text'
+import lexicalRichTextImport from '@lexical/rich-text'
+const { $createHeadingNode, $isHeadingNode, HeadingNode } = lexicalRichTextImport
 
 import { createBlockNode } from '../../lexical/utils/markdown/createBlockNode.js'
 

packages/richtext-lexical/src/field/features/indent/feature.client.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { INDENT_CONTENT_COMMAND, OUTDENT_CONTENT_COMMAND } from 'lexical'
+import lexicalImport from 'lexical'
+const { INDENT_CONTENT_COMMAND, OUTDENT_CONTENT_COMMAND } = lexicalImport
 
 import type { FeatureProviderProviderClient } from '../types.js'
 

packages/richtext-lexical/src/field/features/link/feature.client.tsx

@@ -1,7 +1,10 @@
 'use client'
 
-import { $findMatchingParent } from '@lexical/utils'
-import { $getSelection, $isRangeSelection } from 'lexical'
+import lexicalUtilsImport from '@lexical/utils'
+const { $findMatchingParent } = lexicalUtilsImport
+
+import lexicalImport from 'lexical'
+const { $getSelection, $isRangeSelection } = lexicalImport
 
 import type { FeatureProviderProviderClient } from '../types.js'
 import type { ExclusiveLinkCollectionsProps } from './feature.server.js'

packages/richtext-lexical/src/field/features/link/nodes/AutoLinkNode.ts

@@ -1,10 +1,7 @@
-import {
-  $applyNodeReplacement,
-  $isElementNode,
-  type ElementNode,
-  type LexicalNode,
-  type RangeSelection,
-} from 'lexical'
+import type { ElementNode, LexicalNode, RangeSelection } from 'lexical'
+
+import lexicalImport from 'lexical'
+const { $applyNodeReplacement, $isElementNode } = lexicalImport
 
 import type { LinkFields, SerializedAutoLinkNode } from './types.js'
 

packages/richtext-lexical/src/field/features/link/nodes/LinkNode.ts

@@ -1,21 +1,28 @@
 import type { BaseSelection } from 'lexical'
 
-import { addClassNamesToElement, isHTMLAnchorElement } from '@lexical/utils'
-import {
+import lexicalUtilsImport from '@lexical/utils'
+const { addClassNamesToElement, isHTMLAnchorElement } = lexicalUtilsImport
+
+import lexicalImport from 'lexical'
+const {
   $applyNodeReplacement,
   $createTextNode,
   $getSelection,
   $isElementNode,
   $isRangeSelection,
-  type DOMConversionMap,
-  type DOMConversionOutput,
-  type EditorConfig,
   ElementNode,
-  type LexicalCommand,
-  type LexicalNode,
-  type NodeKey,
-  type RangeSelection,
   createCommand,
+} = lexicalImport
+
+import type {
+  DOMConversionMap,
+  DOMConversionOutput,
+  EditorConfig,
+  ElementNode as ElementNodeType,
+  LexicalCommand,
+  LexicalNode,
+  NodeKey,
+  RangeSelection,
 } from 'lexical'
 
 import type { LinkPayload } from '../plugins/floatingLinkEditor/types.js'
@@ -143,7 +150,7 @@ export class LinkNode extends ElementNode {
     return this.getLatest().__fields
   }
 
-  insertNewAfter(selection: RangeSelection, restoreSelection = true): ElementNode | null {
+  insertNewAfter(selection: RangeSelection, restoreSelection = true): ElementNodeType | null {
     const element = this.getParentOrThrow().insertNewAfter(selection, restoreSelection)
     if ($isElementNode(element)) {
       const linkNode = $createLinkNode({ fields: this.__fields })
@@ -284,7 +291,7 @@ export function toggleLink(payload: LinkPayload): void {
       }
     }
 
-    let prevParent: ElementNode | LinkNode | null = null
+    let prevParent: ElementNodeType | LinkNode | null = null
     let linkNode: LinkNode | null = null
 
     nodes.forEach((node) => {

packages/richtext-lexical/src/field/features/link/plugins/autoLink/index.tsx

@@ -1,9 +1,12 @@
 'use client'
-import type { ElementNode, LexicalEditor, LexicalNode } from 'lexical'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
 
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
-import { mergeRegister } from '@lexical/utils'
-import {
+import lexicalUtilsImport from '@lexical/utils'
+const { mergeRegister } = lexicalUtilsImport
+
+import lexicalImport from 'lexical'
+const {
   $createTextNode,
   $getSelection,
   $isElementNode,
@@ -11,8 +14,12 @@ import {
   $isNodeSelection,
   $isRangeSelection,
   $isTextNode,
-  TextNode,
-} from 'lexical'
+  TextNode: TextNodeValue,
+} = lexicalImport
+
+import type { ElementNode, LexicalEditor, LexicalNode } from 'lexical'
+
+import { type TextNode } from 'lexical'
 import { useEffect } from 'react'
 
 import type { LinkFields } from '../../nodes/types.js'
@@ -391,7 +398,7 @@ function useAutoLink(
     }
 
     return mergeRegister(
-      editor.registerNodeTransform(TextNode, (textNode: TextNode) => {
+      editor.registerNodeTransform(TextNodeValue, (textNode: TextNode) => {
         const parent = textNode.getParentOrThrow()
         const previous = textNode.getPreviousSibling()
         if ($isAutoLinkNode(parent)) {

packages/richtext-lexical/src/field/features/link/plugins/floatingLinkEditor/LinkEditor/commands.ts

@@ -1,6 +1,7 @@
 import type { LexicalCommand } from 'lexical'
 
-import { createCommand } from 'lexical'
+import lexicalImport from 'lexical'
+const { createCommand } = lexicalImport
 
 import type { LinkPayload } from '../types.js'
 

packages/richtext-lexical/src/field/features/link/plugins/floatingLinkEditor/LinkEditor/index.tsx

@@ -2,19 +2,24 @@
 import type { FormState } from 'payload/types'
 import type { Data } from 'payload/types'
 
-import { useModal } from '@faceless-ui/modal'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
-import { $findMatchingParent, mergeRegister } from '@lexical/utils'
+import * as facelessUIImport from '@faceless-ui/modal'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
+
+import lexicalUtilsImport from '@lexical/utils'
+const { $findMatchingParent, mergeRegister } = lexicalUtilsImport
 import { getTranslation } from '@payloadcms/translations'
 import { formatDrawerSlug, useConfig, useEditDepth, useTranslation } from '@payloadcms/ui'
-import {
+import lexicalImport from 'lexical'
+const {
   $getSelection,
   $isRangeSelection,
   COMMAND_PRIORITY_HIGH,
   COMMAND_PRIORITY_LOW,
   KEY_ESCAPE_COMMAND,
   SELECTION_CHANGE_COMMAND,
-} from 'lexical'
+} = lexicalImport
+
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 
 import type { LinkNode } from '../../../nodes/LinkNode.js'
@@ -30,6 +35,8 @@ import { $isLinkNode, TOGGLE_LINK_COMMAND } from '../../../nodes/LinkNode.js'
 import { TOGGLE_LINK_WITH_MODAL_COMMAND } from './commands.js'
 
 export function LinkEditor({ anchorElem }: { anchorElem: HTMLElement }): React.ReactNode {
+  const { useModal } = facelessUIImport
+
   const [editor] = useLexicalComposerContext()
 
   const editorRef = useRef<HTMLDivElement | null>(null)

packages/richtext-lexical/src/field/features/link/plugins/link/index.tsx

@@ -1,13 +1,13 @@
 'use client'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
-import { mergeRegister } from '@lexical/utils'
-import {
-  $getSelection,
-  $isElementNode,
-  $isRangeSelection,
-  COMMAND_PRIORITY_LOW,
-  PASTE_COMMAND,
-} from 'lexical'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
+import lexicalUtilsImport from '@lexical/utils'
+const { mergeRegister } = lexicalUtilsImport
+
+import lexicalImport from 'lexical'
+const { $getSelection, $isElementNode, $isRangeSelection, COMMAND_PRIORITY_LOW, PASTE_COMMAND } =
+  lexicalImport
+
 import { useEffect } from 'react'
 
 import type { LinkFields } from '../../nodes/types.js'

packages/richtext-lexical/src/field/features/lists/checklist/feature.client.tsx

@@ -1,5 +1,6 @@
 'use client'
-import { INSERT_CHECK_LIST_COMMAND, ListItemNode, ListNode } from '@lexical/list'
+import lexicalListImport from '@lexical/list'
+const { INSERT_CHECK_LIST_COMMAND, ListItemNode, ListNode } = lexicalListImport
 
 import type { ClientFeature, FeatureProviderProviderClient } from '../../types.js'
 

packages/richtext-lexical/src/field/features/lists/checklist/feature.server.ts

@@ -1,4 +1,5 @@
-import { ListItemNode, ListNode } from '@lexical/list'
+import lexicalListImport from '@lexical/list'
+const { ListItemNode, ListNode } = lexicalListImport
 
 import type { FeatureProviderProviderServer } from '../../types.js'
 

packages/richtext-lexical/src/field/features/lists/checklist/markdownTransformers.ts

@@ -1,6 +1,7 @@
 import type { ElementTransformer } from '@lexical/markdown'
 
-import { $isListNode, ListItemNode, ListNode } from '@lexical/list'
+import lexicalListImport from '@lexical/list'
+const { $isListNode, ListItemNode, ListNode } = lexicalListImport
 
 import { listExport, listReplace } from '../common/markdown.js'
 

packages/richtext-lexical/src/field/features/lists/checklist/plugin/index.tsx

@@ -1,5 +1,7 @@
 'use client'
-import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin.js'
+import lexicalCheckListPluginImport from '@lexical/react/LexicalCheckListPlugin.js'
+const { CheckListPlugin } = lexicalCheckListPluginImport
+
 import React from 'react'
 
 export function LexicalCheckListPlugin() {

packages/richtext-lexical/src/field/features/lists/common/markdown.ts

@@ -4,7 +4,8 @@ import type { ListNode, ListType } from '@lexical/list'
 import type { ElementTransformer } from '@lexical/markdown'
 import type { ElementNode } from 'lexical'
 
-import { $createListItemNode, $createListNode, $isListItemNode, $isListNode } from '@lexical/list'
+import lexicalListImport from '@lexical/list'
+const { $createListItemNode, $createListNode, $isListItemNode, $isListNode } = lexicalListImport
 
 // Amount of spaces that define indentation level
 const LIST_INDENT_SIZE = 4

packages/richtext-lexical/src/field/features/lists/htmlConverter.ts

@@ -1,6 +1,7 @@
 import type { SerializedListItemNode, SerializedListNode } from '@lexical/list'
 
-import { ListItemNode, ListNode } from '@lexical/list'
+import lexicalListImport from '@lexical/list'
+const { ListItemNode, ListNode } = lexicalListImport
 
 import type { HTMLConverter } from '../converters/html/converter/types.js'
 

packages/richtext-lexical/src/field/features/lists/orderedlist/feature.client.tsx

@@ -1,6 +1,6 @@
 'use client'
-
-import { INSERT_ORDERED_LIST_COMMAND, ListItemNode, ListNode } from '@lexical/list'
+import lexicalListImport from '@lexical/list'
+const { INSERT_ORDERED_LIST_COMMAND, ListItemNode, ListNode } = lexicalListImport
 
 import type { FeatureProviderProviderClient } from '../../types.js'
 

packages/richtext-lexical/src/field/features/lists/orderedlist/feature.server.ts

@@ -1,4 +1,5 @@
-import { ListItemNode, ListNode } from '@lexical/list'
+import lexicalListImport from '@lexical/list'
+const { ListItemNode, ListNode } = lexicalListImport
 
 import type { FeatureProviderProviderServer } from '../../types.js'
 

packages/richtext-lexical/src/field/features/lists/orderedlist/markdownTransformer.ts

@@ -1,6 +1,7 @@
 import type { ElementTransformer } from '@lexical/markdown'
 
-import { $isListNode, ListItemNode, ListNode } from '@lexical/list'
+import lexicalListImport from '@lexical/list'
+const { $isListNode, ListItemNode, ListNode } = lexicalListImport
 
 import { listExport, listReplace } from '../common/markdown.js'
 

packages/richtext-lexical/src/field/features/lists/plugin/index.tsx

@@ -1,5 +1,6 @@
 'use client'
-import { ListPlugin } from '@lexical/react/LexicalListPlugin.js'
+import lexicalListPluginImport from '@lexical/react/LexicalListPlugin.js'
+const { ListPlugin } = lexicalListPluginImport
 import React from 'react'
 
 export function LexicalListPlugin() {

packages/richtext-lexical/src/field/features/lists/unorderedlist/feature.client.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { INSERT_UNORDERED_LIST_COMMAND, ListItemNode, ListNode } from '@lexical/list'
+import lexicalListImport from '@lexical/list'
+const { INSERT_UNORDERED_LIST_COMMAND, ListItemNode, ListNode } = lexicalListImport
 
 import type { FeatureProviderProviderClient } from '../../types.js'
 

packages/richtext-lexical/src/field/features/lists/unorderedlist/feature.server.ts

@@ -1,4 +1,5 @@
-import { ListItemNode, ListNode } from '@lexical/list'
+import lexicalListImport from '@lexical/list'
+const { ListItemNode, ListNode } = lexicalListImport
 
 import type { FeatureProviderProviderServer } from '../../types.js'
 

packages/richtext-lexical/src/field/features/lists/unorderedlist/markdownTransformer.ts

@@ -1,6 +1,7 @@
 import type { ElementTransformer } from '@lexical/markdown'
 
-import { $isListNode, ListItemNode, ListNode } from '@lexical/list'
+import lexicalListImport from '@lexical/list'
+const { $isListNode, ListItemNode, ListNode } = lexicalListImport
 
 import { listExport, listReplace } from '../common/markdown.js'
 

packages/richtext-lexical/src/field/features/migrations/lexicalPluginToLexical/nodes/unknownConvertedNode/index.tsx

@@ -1,7 +1,13 @@
 import type { SerializedLexicalNode, Spread } from 'lexical'
 
-import { addClassNamesToElement } from '@lexical/utils'
-import { DecoratorNode, type EditorConfig, type LexicalNode, type NodeKey } from 'lexical'
+import lexicalUtilsImport from '@lexical/utils'
+const { addClassNamesToElement } = lexicalUtilsImport
+
+import lexicalImport from 'lexical'
+const { DecoratorNode } = lexicalImport
+
+import type { EditorConfig, LexicalNode, NodeKey } from 'lexical'
+
 import * as React from 'react'
 
 export type UnknownConvertedNodeData = {

packages/richtext-lexical/src/field/features/migrations/slateToLexical/nodes/unknownConvertedNode/index.tsx

@@ -1,7 +1,12 @@
 import type { SerializedLexicalNode, Spread } from 'lexical'
 
-import { addClassNamesToElement } from '@lexical/utils'
-import { DecoratorNode, type EditorConfig, type LexicalNode, type NodeKey } from 'lexical'
+import lexicalUtilsImport from '@lexical/utils'
+const { addClassNamesToElement } = lexicalUtilsImport
+import lexicalImport from 'lexical'
+const { DecoratorNode } = lexicalImport
+
+import type { EditorConfig, LexicalNode, NodeKey } from 'lexical'
+
 import * as React from 'react'
 
 export type UnknownConvertedNodeData = {

packages/richtext-lexical/src/field/features/paragraph/feature.client.tsx

@@ -1,7 +1,10 @@
 'use client'
 
-import { $setBlocksType } from '@lexical/selection'
-import { $createParagraphNode, $getSelection } from 'lexical'
+import lexicalSelectionImport from '@lexical/selection'
+const { $setBlocksType } = lexicalSelectionImport
+
+import lexicalImport from 'lexical'
+const { $createParagraphNode, $getSelection } = lexicalImport
 
 import type { FeatureProviderProviderClient } from '../types.js'
 

packages/richtext-lexical/src/field/features/relationship/drawer/commands.ts

@@ -1,6 +1,7 @@
 import type { LexicalCommand } from 'lexical'
 
-import { createCommand } from 'lexical'
+import lexicalImport from 'lexical'
+const { createCommand } = lexicalImport
 
 export const INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND: LexicalCommand<{
   replace: { nodeKey: string } | false

packages/richtext-lexical/src/field/features/relationship/drawer/index.tsx

@@ -1,7 +1,12 @@
 'use client'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
 import { useListDrawer } from '@payloadcms/ui'
-import { $getNodeByKey, COMMAND_PRIORITY_EDITOR, type LexicalEditor } from 'lexical'
+import lexicalImport from 'lexical'
+const { $getNodeByKey, COMMAND_PRIORITY_EDITOR } = lexicalImport
+
+import type { LexicalEditor } from 'lexical'
+
 import React, { useCallback, useEffect, useState } from 'react'
 
 import { $createRelationshipNode } from '../nodes/RelationshipNode.js'

packages/richtext-lexical/src/field/features/relationship/nodes/RelationshipNode.tsx

@@ -10,10 +10,11 @@ import type {
   Spread,
 } from 'lexical'
 
-import {
-  DecoratorBlockNode,
-  type SerializedDecoratorBlockNode,
-} from '@lexical/react/LexicalDecoratorBlockNode.js'
+import lexicalDecoratorBlockNodeImport from '@lexical/react/LexicalDecoratorBlockNode.js'
+const { DecoratorBlockNode } = lexicalDecoratorBlockNodeImport
+
+import type { SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode.js'
+
 import * as React from 'react'
 
 const RelationshipComponent = React.lazy(() =>

packages/richtext-lexical/src/field/features/relationship/nodes/components/RelationshipComponent.tsx

@@ -1,9 +1,14 @@
 'use client'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
 import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection.js'
 import { getTranslation } from '@payloadcms/translations'
 import { Button, useConfig, useDocumentDrawer, usePayloadAPI, useTranslation } from '@payloadcms/ui'
-import { $getNodeByKey, type ElementFormatType } from 'lexical'
+import lexicalImport from 'lexical'
+const { $getNodeByKey } = lexicalImport
+
+import type { ElementFormatType } from 'lexical'
+
 import React, { useCallback, useReducer, useState } from 'react'
 
 import type { RelationshipData } from '../RelationshipNode.js'

packages/richtext-lexical/src/field/features/relationship/plugins/index.tsx

@@ -1,16 +1,21 @@
 'use client'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
-import { $insertNodeToNearestRoot } from '@lexical/utils'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
+import lexicalUtilsImport from '@lexical/utils'
+const { $insertNodeToNearestRoot } = lexicalUtilsImport
 import { useConfig } from '@payloadcms/ui'
-import {
+import lexicalImport from 'lexical'
+const {
   $getPreviousSelection,
   $getSelection,
   $isParagraphNode,
   $isRangeSelection,
   COMMAND_PRIORITY_EDITOR,
-  type LexicalCommand,
   createCommand,
-} from 'lexical'
+} = lexicalImport
+
+import type { LexicalCommand } from 'lexical'
+
 import { useEffect } from 'react'
 import React from 'react'
 

packages/richtext-lexical/src/field/features/upload/component/ExtraFieldsDrawer/index.tsx

@@ -1,8 +1,9 @@
 'use client'
 import type { FormState, SanitizedCollectionConfig } from 'payload/types'
 
-import { useModal } from '@faceless-ui/modal'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
+import * as facelessUIImport from '@faceless-ui/modal'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
 import { getTranslation } from '@payloadcms/translations'
 import {
   Drawer,
@@ -17,7 +18,9 @@ import {
   useFieldPath,
   useTranslation,
 } from '@payloadcms/ui'
-import { $getNodeByKey } from 'lexical'
+import lexicalImport from 'lexical'
+const { $getNodeByKey } = lexicalImport
+
 import { deepCopyObject } from 'payload/utilities'
 import React, { useCallback, useEffect, useState } from 'react'
 import { v4 as uuid } from 'uuid'
@@ -37,6 +40,8 @@ export const ExtraFieldsUploadDrawer: React.FC<
     relatedCollection: SanitizedCollectionConfig
   }
 > = (props) => {
+  const { useModal } = facelessUIImport
+
   const {
     data: { fields, relationTo, value },
     drawerSlug,

packages/richtext-lexical/src/field/features/upload/component/index.tsx

@@ -1,7 +1,8 @@
 'use client'
 import type { SanitizedCollectionConfig } from 'payload/types'
 
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
 import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection.js'
 import { getTranslation } from '@payloadcms/translations'
 import {
@@ -15,7 +16,9 @@ import {
   useThumbnail,
   useTranslation,
 } from '@payloadcms/ui'
-import { $getNodeByKey } from 'lexical'
+import lexicalImport from 'lexical'
+const { $getNodeByKey } = lexicalImport
+
 import React, { useCallback, useReducer, useState } from 'react'
 
 import type { ClientComponentProps } from '../../types.js'

packages/richtext-lexical/src/field/features/upload/drawer/commands.ts

@@ -1,7 +1,8 @@
 'use client'
 import type { LexicalCommand } from 'lexical'
 
-import { createCommand } from 'lexical'
+import lexicalImport from 'lexical'
+const { createCommand } = lexicalImport
 
 export const INSERT_UPLOAD_WITH_DRAWER_COMMAND: LexicalCommand<{
   replace: { nodeKey: string } | false

packages/richtext-lexical/src/field/features/upload/drawer/index.tsx

@@ -1,7 +1,12 @@
 'use client'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
 import { useListDrawer } from '@payloadcms/ui'
-import { $getNodeByKey, COMMAND_PRIORITY_EDITOR, type LexicalEditor } from 'lexical'
+import lexicalImport from 'lexical'
+const { $getNodeByKey, COMMAND_PRIORITY_EDITOR } = lexicalImport
+
+import type { LexicalEditor } from 'lexical'
+
 import React, { useCallback, useEffect, useState } from 'react'
 
 import { EnabledRelationshipsCondition } from '../../relationship/utils/EnabledRelationshipsCondition.js'

packages/richtext-lexical/src/field/features/upload/nodes/UploadNode.tsx

@@ -1,15 +1,20 @@
 import type { SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode.js'
 import type { ElementFormatType, NodeKey } from 'lexical'
 
-import { DecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode.js'
-import {
-  $applyNodeReplacement,
-  type DOMConversionMap,
-  type DOMConversionOutput,
-  type DOMExportOutput,
-  type LexicalNode,
-  type Spread,
+import lexicalDecoratorBlockNodeImport from '@lexical/react/LexicalDecoratorBlockNode.js'
+const { DecoratorBlockNode } = lexicalDecoratorBlockNodeImport
+
+import lexicalImport from 'lexical'
+const { $applyNodeReplacement } = lexicalImport
+
+import type {
+  DOMConversionMap,
+  DOMConversionOutput,
+  DOMExportOutput,
+  LexicalNode,
+  Spread,
 } from 'lexical'
+
 import * as React from 'react'
 
 const RawUploadComponent = React.lazy(() =>

packages/richtext-lexical/src/field/features/upload/plugin/index.tsx

@@ -1,16 +1,21 @@
 'use client'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
-import { $insertNodeToNearestRoot, mergeRegister } from '@lexical/utils'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
+import lexicalUtilsImport from '@lexical/utils'
+const { $insertNodeToNearestRoot, mergeRegister } = lexicalUtilsImport
 import { useConfig } from '@payloadcms/ui'
-import {
+import lexicalImport from 'lexical'
+const {
   $getPreviousSelection,
   $getSelection,
   $isParagraphNode,
   $isRangeSelection,
   COMMAND_PRIORITY_EDITOR,
-  type LexicalCommand,
   createCommand,
-} from 'lexical'
+} = lexicalImport
+
+import type { LexicalCommand } from 'lexical'
+
 import React, { useEffect } from 'react'
 
 import type { RawUploadPayload } from '../nodes/UploadNode.js'

packages/richtext-lexical/src/field/lexical/LexicalEditor.tsx

@@ -1,10 +1,20 @@
 'use client'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
+
 import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary.js'
-import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin.js'
-import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin.js'
-import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin.js'
-import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin.js'
+import lexicalHistoryPluginImport from '@lexical/react/LexicalHistoryPlugin.js'
+const { HistoryPlugin } = lexicalHistoryPluginImport
+
+import lexicalOnChangePluginImport from '@lexical/react/LexicalOnChangePlugin.js'
+const { OnChangePlugin } = lexicalOnChangePluginImport
+
+import lexicalRichTextPluginImport from '@lexical/react/LexicalRichTextPlugin.js'
+const { RichTextPlugin } = lexicalRichTextPluginImport
+
+import lexicalTabIndentationPluginImport from '@lexical/react/LexicalTabIndentationPlugin.js'
+const { TabIndentationPlugin } = lexicalTabIndentationPluginImport
+
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 

packages/richtext-lexical/src/field/lexical/LexicalProvider.tsx

@@ -3,7 +3,11 @@ import type { FormFieldBase } from '@payloadcms/ui'
 import type { EditorState, SerializedEditorState } from 'lexical'
 import type { LexicalEditor } from 'lexical'
 
-import { type InitialConfigType, LexicalComposer } from '@lexical/react/LexicalComposer.js'
+import lexicalComposerImport from '@lexical/react/LexicalComposer.js'
+const { LexicalComposer } = lexicalComposerImport
+
+import type { InitialConfigType } from '@lexical/react/LexicalComposer.js'
+
 import * as React from 'react'
 
 import type { SanitizedClientEditorConfig } from './config/types.js'

packages/richtext-lexical/src/field/lexical/plugins/FloatingSelectToolbar/ToolbarButton/index.tsx

@@ -1,7 +1,12 @@
 'use client'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
-import { mergeRegister } from '@lexical/utils'
-import { $getSelection } from 'lexical'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
+import lexicalUtilsImport from '@lexical/utils'
+const { mergeRegister } = lexicalUtilsImport
+
+import lexicalImport from 'lexical'
+const { $getSelection } = lexicalImport
+
 import React, { useCallback, useEffect, useState } from 'react'
 
 import type { FloatingToolbarSectionEntry } from '../types.js'

packages/richtext-lexical/src/field/lexical/plugins/FloatingSelectToolbar/ToolbarDropdown/DropDown.tsx

@@ -1,7 +1,13 @@
 'use client'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
-import { mergeRegister } from '@lexical/utils'
-import { $getSelection } from 'lexical'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
+
+import lexicalUtilsImport from '@lexical/utils'
+const { mergeRegister } = lexicalUtilsImport
+
+import lexicalImport from 'lexical'
+const { $getSelection } = lexicalImport
+
 import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import React from 'react'
 import { createPortal } from 'react-dom'

packages/richtext-lexical/src/field/lexical/plugins/FloatingSelectToolbar/index.tsx

@@ -1,15 +1,21 @@
 'use client'
 import type { LexicalEditor } from 'lexical'
 
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
-import { mergeRegister } from '@lexical/utils'
-import {
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
+
+import lexicalUtilsImport from '@lexical/utils'
+const { mergeRegister } = lexicalUtilsImport
+
+import lexicalImport from 'lexical'
+const {
   $getSelection,
   $isRangeSelection,
   $isTextNode,
   COMMAND_PRIORITY_LOW,
   SELECTION_CHANGE_COMMAND,
-} from 'lexical'
+} = lexicalImport
+
 import { useCallback, useEffect, useRef, useState } from 'react'
 import * as React from 'react'
 import { createPortal } from 'react-dom'

packages/richtext-lexical/src/field/lexical/plugins/MarkdownShortcut/index.tsx

@@ -1,5 +1,9 @@
 'use client'
-import { MarkdownShortcutPlugin as LexicalMarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin.js'
+
+import lexicalMarkdownShortcutPluginImport from '@lexical/react/LexicalMarkdownShortcutPlugin.js'
+const { MarkdownShortcutPlugin: LexicalMarkdownShortcutPlugin } =
+  lexicalMarkdownShortcutPluginImport
+
 import * as React from 'react'
 
 import { useEditorConfigContext } from '../../config/client/EditorConfigProvider.js'

packages/richtext-lexical/src/field/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/LexicalMenu.tsx

@@ -2,9 +2,14 @@
 import type { LexicalCommand, LexicalEditor, TextNode } from 'lexical'
 import type { MutableRefObject, ReactPortal } from 'react'
 
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
-import { mergeRegister } from '@lexical/utils'
-import {
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
+
+import lexicalUtilsImport from '@lexical/utils'
+const { mergeRegister } = lexicalUtilsImport
+
+import lexicalImport from 'lexical'
+const {
   $getSelection,
   $isRangeSelection,
   COMMAND_PRIORITY_LOW,
@@ -14,7 +19,8 @@ import {
   KEY_ESCAPE_COMMAND,
   KEY_TAB_COMMAND,
   createCommand,
-} from 'lexical'
+} = lexicalImport
+
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 
 import type { MenuTextMatch } from '../useMenuTriggerMatch.js'

packages/richtext-lexical/src/field/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/index.tsx

@@ -7,15 +7,16 @@ import type {
   TextNode,
 } from 'lexical'
 
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
-import { mergeRegister } from '@lexical/utils'
-import {
-  $getSelection,
-  $isRangeSelection,
-  $isTextNode,
-  COMMAND_PRIORITY_LOW,
-  createCommand,
-} from 'lexical'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
+
+import lexicalUtilsImport from '@lexical/utils'
+const { mergeRegister } = lexicalUtilsImport
+
+import lexicalImport from 'lexical'
+const { $getSelection, $isRangeSelection, $isTextNode, COMMAND_PRIORITY_LOW, createCommand } =
+  lexicalImport
+
 import { useCallback, useEffect, useState } from 'react'
 import * as React from 'react'
 

packages/richtext-lexical/src/field/lexical/plugins/SlashMenu/index.tsx

@@ -1,7 +1,9 @@
 'use client'
 import type { TextNode } from 'lexical'
 
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
+
 import { useTranslation } from '@payloadcms/ui'
 import { useCallback, useMemo, useState } from 'react'
 import * as React from 'react'

packages/richtext-lexical/src/field/lexical/plugins/handles/AddBlockHandlePlugin/index.tsx

@@ -1,9 +1,11 @@
 'use client'
-import type { ParagraphNode } from 'lexical'
+import type { LexicalEditor, LexicalNode, ParagraphNode } from 'lexical'
+
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
+import lexicalImport from 'lexical'
+const { $createParagraphNode, $getNodeByKey } = lexicalImport
 
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
-import { $createParagraphNode } from 'lexical'
-import { $getNodeByKey, type LexicalEditor, type LexicalNode } from 'lexical'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'

packages/richtext-lexical/src/field/lexical/plugins/handles/DraggableBlockPlugin/getNodeCloseToPoint.ts

@@ -1,6 +1,7 @@
 import type { LexicalEditor, LexicalNode } from 'lexical'
 
-import { $getNodeByKey } from 'lexical'
+import lexicalImport from 'lexical'
+const { $getNodeByKey } = lexicalImport
 
 import { Point } from '../../../utils/point.js'
 import { Rect } from '../../../utils/rect.js'

packages/richtext-lexical/src/field/lexical/plugins/handles/DraggableBlockPlugin/index.tsx

@@ -2,9 +2,12 @@
 import type { LexicalEditor } from 'lexical'
 import type { DragEvent as ReactDragEvent } from 'react'
 
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
+
 import { eventFiles } from '@lexical/rich-text'
-import { $getNearestNodeFromDOMNode, $getNodeByKey } from 'lexical'
+import lexicalImport from 'lexical'
+const { $getNearestNodeFromDOMNode, $getNodeByKey } = lexicalImport
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'

packages/richtext-lexical/src/field/lexical/plugins/handles/utils/getTopLevelNodeKeys.ts

@@ -1,6 +1,7 @@
 import type { LexicalEditor } from 'lexical'
 
-import { $getRoot } from 'lexical'
+import lexicalImport from 'lexical'
+const { $getRoot } = lexicalImport
 
 export function getTopLevelNodeKeys(editor: LexicalEditor): string[] {
   return editor.getEditorState().read(() => $getRoot().getChildrenKeys())