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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "payload-monorepo",
-  "version": "3.0.0-alpha.29",
+  "version": "3.0.0-alpha.30",
   "private": true,
   "type": "module",
   "workspaces:": [

packages/db-mongodb/src/queries/buildSearchParams.ts

@@ -3,7 +3,7 @@ import type { PathToQuery } from 'payload/database'
 import type { Field } from 'payload/types'
 import type { Operator } from 'payload/types'
 
-import ObjectId from 'bson-objectid'
+import ObjectIdImport from 'bson-objectid'
 import mongoose from 'mongoose'
 import { getLocalizedPaths } from 'payload/database'
 import { fieldAffectsData } from 'payload/types'
@@ -14,6 +14,9 @@ import type { MongooseAdapter } from '../index.d.ts'
 import { operatorMap } from './operatorMap.js'
 import { sanitizeQueryValue } from './sanitizeQueryValue.js'
 
+const ObjectId = (ObjectIdImport.default ||
+  ObjectIdImport) as unknown as typeof ObjectIdImport.default
+
 type SearchParam = {
   path?: string
   rawQuery?: unknown
@@ -205,7 +208,7 @@ export async function buildSearchParam({
         if (typeof formattedValue === 'string') {
           if (mongoose.Types.ObjectId.isValid(formattedValue)) {
             result.value.$or.push({
-              [path]: { [operatorKey]: new ObjectId.default(formattedValue) },
+              [path]: { [operatorKey]: new ObjectId(formattedValue) },
             })
           } else {
             ;(Array.isArray(field.relationTo) ? field.relationTo : [field.relationTo]).forEach(

packages/next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/next",
-  "version": "3.0.0-alpha.29",
+  "version": "3.0.0-alpha.30",
   "main": "./src/index.ts",
   "types": "./src/index.d.ts",
   "type": "module",
@@ -8,7 +8,6 @@
     "@payloadcms/next": "./dist/bin/index.js"
   },
   "scripts": {
-    "build:webpack": "webpack --config webpack.config.js",
     "build": "pnpm copyfiles && pnpm build:swc && pnpm build:types",
     "build:swc": "swc ./src -d ./dist --config-file .swcrc",
     "build:types": "tsc --emitDeclarationOnly --outDir dist",
@@ -51,20 +50,7 @@
     "@types/react": "18.2.15",
     "@types/react-dom": "18.2.7",
     "@types/ws": "^8.5.10",
-    "css-loader": "^6.10.0",
-    "css-minimizer-webpack-plugin": "^6.0.0",
-    "file-loader": "6.2.0",
-    "mini-css-extract-plugin": "1.6.2",
-    "payload": "workspace:*",
-    "postcss-loader": "^8.1.1",
-    "postcss-preset-env": "^9.4.0",
-    "sass": "^1.70.0",
-    "sass-loader": "^14.1.1",
-    "swc-loader": "^0.2.6",
-    "terser-webpack-plugin": "^5.3.10",
-    "url-loader": "^4.1.1",
-    "webpack": "^5.78.0",
-    "webpack-cli": "^5.1.4"
+    "payload": "workspace:*"
   },
   "dependencies": {
     "@dnd-kit/core": "6.0.8",

packages/next/src/bin/index.ts

@@ -6,7 +6,7 @@ const script = scriptIndex === -1 ? args._[0] : args._[scriptIndex]
 
 const { debug } = args
 
-import { install } from './install'
+import { install } from './install.js'
 
 main()
 

packages/next/src/elements/LeaveWithoutSaving/index.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from '@payloadcms/ui/providers'
 import React, { useCallback, useEffect } from 'react'
 
 import './index.scss'
-import { usePreventLeave } from './usePreventLeave'
+import { usePreventLeave } from './usePreventLeave.js'
 
 const modalSlug = 'leave-without-saving'
 

packages/next/src/elements/LeaveWithoutSaving/usePreventLeave.tsx

@@ -2,7 +2,7 @@
 //    - Source: https://github.com/vercel/next.js/discussions/32231#discussioncomment-7284386
 // Credit: `react-use` maintainers
 //    -  Source: https://github.com/streamich/react-use/blob/ade8d3905f544305515d010737b4ae604cc51024/src/useBeforeUnload.ts#L2
-import { useRouter } from 'next/navigation'
+import { useRouter } from 'next/navigation.js'
 import { useCallback, useEffect, useRef } from 'react'
 
 function on<T extends Document | EventTarget | HTMLElement | Window>(

packages/next/src/exports/index.ts

@@ -1 +1 @@
-export { default as withPayload } from '../withPayload'
+export { default as withPayload } from '../withPayload.js'

packages/next/src/index.ts

@@ -1,5 +1,5 @@
-export { AdminLayout } from './layouts/Admin'
-export { RootLayout } from './layouts/Root'
-export { Dashboard as DashboardPage } from './views/Dashboard'
-export { Login } from './views/Login'
-export { RootPage } from './views/Root'
+export { AdminLayout } from './layouts/Admin/index.js'
+export { RootLayout } from './layouts/Root/index.js'
+export { Dashboard as DashboardPage } from './views/Dashboard/index.js'
+export { Login } from './views/Login/index.js'
+export { RootPage } from './views/Root/index.js'

packages/next/src/layouts/Admin/index.tsx

@@ -4,7 +4,7 @@ import { DefaultTemplate } from '@payloadcms/ui'
 import '@payloadcms/ui/scss/app.scss'
 import React from 'react'
 
-import { initPage } from '../../utilities/initPage'
+import { initPage } from '../../utilities/initPage.js'
 
 export const metadata = {
   description: 'Generated by Next.js',

packages/next/src/layouts/Root/index.tsx

@@ -4,18 +4,17 @@ import { auth } from '@payloadcms/next/utilities/auth'
 import { translations } from '@payloadcms/translations/client'
 import { RootProvider, buildComponentMap } from '@payloadcms/ui'
 import '@payloadcms/ui/scss/app.scss'
-import { headers as getHeaders } from 'next/headers'
-import { parseCookies } from 'payload/auth'
+import { headers as getHeaders } from 'next/headers.js'
 import { createClientConfig } from 'payload/config'
 import { deepMerge } from 'payload/utilities'
 import React from 'react'
 import 'react-toastify/dist/ReactToastify.css'
 
-import { getRequestLanguage } from '../../utilities/getRequestLanguage'
-import { DefaultEditView } from '../../views/Edit/Default'
-import { DefaultListView } from '../../views/List/Default'
-import { DefaultCell } from '../../views/List/Default/Cell'
-import { getPayload } from '../../utilities/getPayload'
+import { getRequestLanguage } from '../../utilities/getRequestLanguage.js'
+import { DefaultEditView } from '../../views/Edit/Default/index.js'
+import { DefaultListView } from '../../views/List/Default/index.js'
+import { DefaultCell } from '../../views/List/Default/Cell/index.js'
+import { getPayload } from '../../utilities/getPayload.js'
 
 export const metadata = {
   description: 'Generated by Next.js',

packages/next/src/next-fileupload/fileFactory.ts

@@ -1,4 +1,4 @@
-import type { FileShape, NextFileUploadOptions } from '.'
+import type { FileShape, NextFileUploadOptions } from './index.d.ts'
 
 import {
   checkAndMakeDir,
@@ -7,7 +7,7 @@ import {
   moveFile,
   promiseCallback,
   saveBufferToFile,
-} from './utilities'
+} from './utilities.js'
 
 type MoveFile = (
   filePath: string,

packages/next/src/next-fileupload/handlers.ts

@@ -2,9 +2,9 @@ import crypto from 'crypto'
 import fs, { WriteStream } from 'fs'
 import path from 'path'
 
-import type { NextFileUploadOptions } from '.'
+import type { NextFileUploadOptions } from './index.d.ts'
 
-import { checkAndMakeDir, debugLog, deleteFile, getTempFilename } from './utilities'
+import { checkAndMakeDir, debugLog, deleteFile, getTempFilename } from './utilities.js'
 
 type Handler = (
   options: NextFileUploadOptions,

packages/next/src/next-fileupload/index.ts

@@ -2,9 +2,9 @@ import type { BusboyConfig } from 'busboy'
 
 import path from 'path'
 
-import { isEligibleRequest } from './isEligibleRequest'
-import { processMultipart } from './processMultipart'
-import { debugLog } from './utilities'
+import { isEligibleRequest } from './isEligibleRequest.js'
+import { processMultipart } from './processMultipart.js'
+import { debugLog } from './utilities.js'
 
 const DEFAULT_OPTIONS = {
   abortOnLimit: false,

packages/next/src/next-fileupload/processMultipart.ts

@@ -1,13 +1,13 @@
 import Busboy from 'busboy'
 import { APIError } from 'payload/errors'
 
-import type { NextFileUploadOptions, NextFileUploadResponse } from '.'
+import type { NextFileUploadOptions, NextFileUploadResponse } from './index.js'
 
-import { fileFactory } from './fileFactory'
-import { memHandler, tempFileHandler } from './handlers'
-import { processNested } from './processNested'
-import { createUploadTimer } from './uploadTimer'
-import { buildFields, debugLog, isFunc, parseFileName } from './utilities'
+import { fileFactory } from './fileFactory.js'
+import { memHandler, tempFileHandler } from './handlers.js'
+import { processNested } from './processNested.js'
+import { createUploadTimer } from './uploadTimer.js'
+import { buildFields, debugLog, isFunc, parseFileName } from './utilities.js'
 
 const waitFlushProperty = Symbol('wait flush property symbol')
 

packages/next/src/next-fileupload/processNested.ts

@@ -1,4 +1,4 @@
-import { isSafeFromPollution } from './utilities'
+import { isSafeFromPollution } from './utilities.js'
 
 export const processNested = function (data) {
   if (!data || data.length < 1) return Object.create(null)

packages/next/src/next-fileupload/utilities.ts

@@ -2,7 +2,7 @@ import fs from 'fs'
 import path from 'path'
 import { Readable } from 'stream'
 
-import type { NextFileUploadOptions } from '.'
+import type { NextFileUploadOptions } from './index.js'
 
 // Parameters for safe file name parsing.
 const SAFE_FILE_NAME_REGEX = /[^\w-]/g

packages/next/src/routes/graphql/handler.ts

@@ -6,7 +6,7 @@ import { configToSchema } from '@payloadcms/graphql'
 import { createHandler } from 'graphql-http/lib/use/fetch'
 import httpStatus from 'http-status'
 
-import { createPayloadRequest } from '../../utilities/createPayloadRequest'
+import { createPayloadRequest } from '../../utilities/createPayloadRequest.js'
 
 const handleError = async (
   payload: Payload,

packages/next/src/routes/graphql/index.ts

@@ -1,3 +1,3 @@
-export { POST as GRAPHQL_POST } from './handler'
+export { POST as GRAPHQL_POST } from './handler.js'
 
-export { GET as GRAPHQL_PLAYGROUND_GET } from './playground'
+export { GET as GRAPHQL_PLAYGROUND_GET } from './playground.js'

packages/next/src/routes/graphql/playground.ts

@@ -2,7 +2,7 @@ import type { SanitizedConfig } from 'payload/types'
 
 import { renderPlaygroundPage } from 'graphql-playground-html'
 
-import { createPayloadRequest } from '../../utilities/createPayloadRequest'
+import { createPayloadRequest } from '../../utilities/createPayloadRequest.js'
 
 export const GET = (config: Promise<SanitizedConfig>) => async (request: Request) => {
   const req = await createPayloadRequest({

packages/next/src/routes/index.ts

@@ -1,10 +1,10 @@
-export { GRAPHQL_PLAYGROUND_GET, GRAPHQL_POST } from './graphql'
+export { GRAPHQL_PLAYGROUND_GET, GRAPHQL_POST } from './graphql/index.js'
 
 export {
   DELETE as REST_DELETE,
   GET as REST_GET,
   PATCH as REST_PATCH,
   POST as REST_POST,
-} from './rest'
+} from './rest/index.js'
 
-export { GET as GET_STATIC_FILE } from './rest/[collection]/file/[filename]/route'
+export { GET as GET_STATIC_FILE } from './rest/[collection]/file/[filename]/route.js'

packages/next/src/routes/rest/[collection]/file/[filename]/route.ts

@@ -6,10 +6,10 @@ import path from 'path'
 import { executeAccess } from 'payload/auth'
 import { APIError, Forbidden } from 'payload/errors'
 
-import { streamFile } from '../../../../../next-stream-file'
-import { createPayloadRequest } from '../../../../../utilities/createPayloadRequest'
-import { RouteError } from '../../../RouteError'
-import { endpointsAreDisabled } from '../../../checkEndpoints'
+import { streamFile } from '../../../../../next-stream-file/index.js'
+import { createPayloadRequest } from '../../../../../utilities/createPayloadRequest.js'
+import { RouteError } from '../../../RouteError.js'
+import { endpointsAreDisabled } from '../../../checkEndpoints.js'
 
 async function checkFileAccess({
   collection,

packages/next/src/routes/rest/auth/access.ts

@@ -1,7 +1,7 @@
 import httpStatus from 'http-status'
 import { accessOperation } from 'payload/operations'
 
-import type { BaseRouteHandler } from '../types'
+import type { BaseRouteHandler } from '../types.d.ts'
 
 export const access: BaseRouteHandler = async ({ req }) => {
   const results = await accessOperation({

packages/next/src/routes/rest/auth/forgotPassword.ts

@@ -1,7 +1,7 @@
 import httpStatus from 'http-status'
 import { forgotPasswordOperation } from 'payload/operations'
 
-import type { CollectionRouteHandler } from '../types'
+import type { CollectionRouteHandler } from '../types.d.ts'
 
 export const forgotPassword: CollectionRouteHandler = async ({ collection, req }) => {
   await forgotPasswordOperation({

packages/next/src/routes/rest/auth/init.ts

@@ -1,6 +1,6 @@
 import { initOperation } from 'payload/operations'
 
-import type { CollectionRouteHandler } from '../types'
+import type { CollectionRouteHandler } from '../types.d.ts'
 
 export const init: CollectionRouteHandler = async ({ collection, req }) => {
   const initialized = await initOperation({

packages/next/src/routes/rest/auth/login.ts

@@ -3,7 +3,7 @@ import { generatePayloadCookie } from 'payload/auth'
 import { loginOperation } from 'payload/operations'
 import { isNumber } from 'payload/utilities'
 
-import type { CollectionRouteHandler } from '../types'
+import type { CollectionRouteHandler } from '../types.d.ts'
 
 export const login: CollectionRouteHandler = async ({ collection, req }) => {
   const { searchParams } = req

packages/next/src/routes/rest/auth/logout.ts

@@ -2,7 +2,7 @@ import httpStatus from 'http-status'
 import { generateExpiredPayloadCookie } from 'payload/auth'
 import { logoutOperation } from 'payload/operations'
 
-import type { CollectionRouteHandler } from '../types'
+import type { CollectionRouteHandler } from '../types.d.ts'
 
 export const logout: CollectionRouteHandler = async ({ collection, req }) => {
   const result = logoutOperation({

packages/next/src/routes/rest/auth/me.ts

@@ -2,7 +2,7 @@ import httpStatus from 'http-status'
 import { extractJWT } from 'payload/auth'
 import { meOperation } from 'payload/operations'
 
-import type { CollectionRouteHandler } from '../types'
+import type { CollectionRouteHandler } from '../types.d.ts'
 
 export const me: CollectionRouteHandler = async ({ collection, req }) => {
   const currentToken = extractJWT(req)

packages/next/src/routes/rest/auth/refresh.ts

@@ -3,7 +3,7 @@ import { extractJWT } from 'payload/auth'
 import { generatePayloadCookie } from 'payload/auth'
 import { refreshOperation } from 'payload/operations'
 
-import type { CollectionRouteHandler } from '../types'
+import type { CollectionRouteHandler } from '../types.d.ts'
 
 export const refresh: CollectionRouteHandler = async ({ collection, req }) => {
   const token = typeof req.data?.token === 'string' ? req.data.token : extractJWT(req)

packages/next/src/routes/rest/auth/registerFirstUser.ts

@@ -2,7 +2,7 @@ import httpStatus from 'http-status'
 import { generatePayloadCookie } from 'payload/auth'
 import { registerFirstUserOperation } from 'payload/operations'
 
-import type { CollectionRouteHandler } from '../types'
+import type { CollectionRouteHandler } from '../types.d.ts'
 
 export const registerFirstUser: CollectionRouteHandler = async ({ collection, req }) => {
   const result = await registerFirstUserOperation({

packages/next/src/routes/rest/auth/resetPassword.ts

@@ -2,7 +2,7 @@ import httpStatus from 'http-status'
 import { generatePayloadCookie } from 'payload/auth'
 import { resetPasswordOperation } from 'payload/operations'
 
-import type { CollectionRouteHandler } from '../types'
+import type { CollectionRouteHandler } from '../types.d.ts'
 
 export const resetPassword: CollectionRouteHandler = async ({ collection, req }) => {
   const { searchParams } = req

packages/next/src/routes/rest/auth/unlock.ts

@@ -1,7 +1,7 @@
 import httpStatus from 'http-status'
 import { unlockOperation } from 'payload/operations'
 
-import type { CollectionRouteHandler } from '../types'
+import type { CollectionRouteHandler } from '../types.d.ts'
 
 export const unlock: CollectionRouteHandler = async ({ collection, req }) => {
   await unlockOperation({

packages/next/src/routes/rest/auth/verifyEmail.ts

@@ -1,7 +1,7 @@
 import httpStatus from 'http-status'
 import { verifyEmailOperation } from 'payload/operations'
 
-import type { CollectionRouteHandlerWithID } from '../types'
+import type { CollectionRouteHandlerWithID } from '../types.d.ts'
 
 export const verifyEmail: CollectionRouteHandlerWithID = async ({ id, collection, req }) => {
   await verifyEmailOperation({

packages/next/src/routes/rest/checkEndpoints.ts

@@ -1,5 +1,4 @@
 import httpStatus from 'http-status'
-import { CollectionConfig, GlobalConfig } from 'payload/types'
 
 export const endpointsAreDisabled = ({
   endpoints,

packages/next/src/routes/rest/collections/create.ts

@@ -2,7 +2,7 @@ import httpStatus from 'http-status'
 import { createOperation } from 'payload/operations'
 import { isNumber } from 'payload/utilities'
 
-import type { CollectionRouteHandler } from '../types'
+import type { CollectionRouteHandler } from '../types.d.ts'
 
 export const create: CollectionRouteHandler = async ({ collection, req }) => {
   const { searchParams } = req

packages/next/src/routes/rest/collections/delete.ts

@@ -6,7 +6,7 @@ import { deleteOperation } from 'payload/operations'
 import { isNumber } from 'payload/utilities'
 import qs from 'qs'
 
-import type { CollectionRouteHandler } from '../types'
+import type { CollectionRouteHandler } from '../types.d.ts'
 
 export const deleteDoc: CollectionRouteHandler = async ({ collection, req }) => {
   const { searchParams } = req

packages/next/src/routes/rest/collections/deleteByID.ts

@@ -2,7 +2,7 @@ import httpStatus from 'http-status'
 import { deleteByIDOperation } from 'payload/operations'
 import { isNumber } from 'payload/utilities'
 
-import type { CollectionRouteHandlerWithID } from '../types'
+import type { CollectionRouteHandlerWithID } from '../types.d.ts'
 
 export const deleteByID: CollectionRouteHandlerWithID = async ({ id, collection, req }) => {
   const { searchParams } = req

packages/next/src/routes/rest/collections/docAccess.ts

@@ -1,7 +1,7 @@
 import httpStatus from 'http-status'
 import { docAccessOperation } from 'payload/operations'
 
-import type { CollectionRouteHandlerWithID } from '../types'
+import type { CollectionRouteHandlerWithID } from '../types.d.ts'
 
 export const docAccess: CollectionRouteHandlerWithID = async ({ id, collection, req }) => {
   const result = await docAccessOperation({

packages/next/src/routes/rest/collections/find.ts

@@ -5,7 +5,7 @@ import { findOperation } from 'payload/operations'
 import { isNumber } from 'payload/utilities'
 import qs from 'qs'
 
-import type { CollectionRouteHandler } from '../types'
+import type { CollectionRouteHandler } from '../types.d.ts'
 
 export const find: CollectionRouteHandler = async ({ collection, req }) => {
   const { searchParams } = req

packages/next/src/routes/rest/collections/findByID.ts

@@ -2,7 +2,7 @@ import httpStatus from 'http-status'
 import { findByIDOperation } from 'payload/operations'
 import { isNumber } from 'payload/utilities'
 
-import type { CollectionRouteHandlerWithID } from '../types'
+import type { CollectionRouteHandlerWithID } from '../types.d.ts'
 
 export const findByID: CollectionRouteHandlerWithID = async ({ id, collection, req }) => {
   const { searchParams } = req

packages/next/src/routes/rest/collections/findVersionByID.ts

@@ -2,7 +2,7 @@ import httpStatus from 'http-status'
 import { findVersionByIDOperation } from 'payload/operations'
 import { isNumber } from 'payload/utilities'
 
-import type { CollectionRouteHandlerWithID } from '../types'
+import type { CollectionRouteHandlerWithID } from '../types.d.ts'
 
 export const findVersionByID: CollectionRouteHandlerWithID = async ({ id, collection, req }) => {
   const { searchParams } = req

packages/next/src/routes/rest/collections/findVersions.ts

@@ -5,7 +5,7 @@ import { findVersionsOperation } from 'payload/operations'
 import { isNumber } from 'payload/utilities'
 import qs from 'qs'
 
-import type { CollectionRouteHandler } from '../types'
+import type { CollectionRouteHandler } from '../types.d.ts'
 
 export const findVersions: CollectionRouteHandler = async ({ collection, req }) => {
   const { searchParams } = req

packages/next/src/routes/rest/collections/restoreVersion.ts

@@ -2,7 +2,7 @@ import httpStatus from 'http-status'
 import { restoreVersionOperation } from 'payload/operations'
 import { isNumber } from 'payload/utilities'
 
-import type { CollectionRouteHandlerWithID } from '../types'
+import type { CollectionRouteHandlerWithID } from '../types.d.ts'
 
 export const restoreVersion: CollectionRouteHandlerWithID = async ({ id, collection, req }) => {
   const { searchParams } = req

packages/next/src/routes/rest/collections/update.ts

@@ -6,7 +6,7 @@ import { updateOperation } from 'payload/operations'
 import { isNumber } from 'payload/utilities'
 import qs from 'qs'
 
-import type { CollectionRouteHandler } from '../types'
+import type { CollectionRouteHandler } from '../types.d.ts'
 
 export const update: CollectionRouteHandler = async ({ collection, req }) => {
   const { searchParams } = req

packages/next/src/routes/rest/collections/updateByID.ts

@@ -2,7 +2,7 @@ import httpStatus from 'http-status'
 import { updateByIDOperation } from 'payload/operations'
 import { isNumber } from 'payload/utilities'
 
-import type { CollectionRouteHandlerWithID } from '../types'
+import type { CollectionRouteHandlerWithID } from '../types.d.ts'
 
 export const updateByID: CollectionRouteHandlerWithID = async ({ id, collection, req }) => {
   const { searchParams } = req

packages/next/src/routes/rest/globals/docAccess.ts

@@ -1,7 +1,7 @@
 import httpStatus from 'http-status'
 import { docAccessOperationGlobal } from 'payload/operations'
 
-import type { GlobalRouteHandler } from '../types'
+import type { GlobalRouteHandler } from '../types.d.ts'
 
 export const docAccess: GlobalRouteHandler = async ({ globalConfig, req }) => {
   const result = await docAccessOperationGlobal({

packages/next/src/routes/rest/globals/findOne.ts

@@ -2,7 +2,7 @@ import httpStatus from 'http-status'
 import { findOneOperation } from 'payload/operations'
 import { isNumber } from 'payload/utilities'
 
-import type { GlobalRouteHandler } from '../types'
+import type { GlobalRouteHandler } from '../types.d.ts'
 
 export const findOne: GlobalRouteHandler = async ({ globalConfig, req }) => {
   const { searchParams } = req

packages/next/src/routes/rest/globals/findVersionByID.ts

@@ -2,7 +2,7 @@ import httpStatus from 'http-status'
 import { findVersionByIDOperationGlobal } from 'payload/operations'
 import { isNumber } from 'payload/utilities'
 
-import type { GlobalRouteHandlerWithID } from '../types'
+import type { GlobalRouteHandlerWithID } from '../types.d.ts'
 
 export const findVersionByID: GlobalRouteHandlerWithID = async ({ id, globalConfig, req }) => {
   const { searchParams } = req

packages/next/src/routes/rest/globals/findVersions.ts

@@ -5,7 +5,7 @@ import { findVersionsOperationGlobal } from 'payload/operations'
 import { isNumber } from 'payload/utilities'
 import qs from 'qs'
 
-import type { GlobalRouteHandler } from '../types'
+import type { GlobalRouteHandler } from '../types.d.ts'
 
 export const findVersions: GlobalRouteHandler = async ({ globalConfig, req }) => {
   const { searchParams } = req

packages/next/src/routes/rest/globals/restoreVersion.ts

@@ -2,7 +2,7 @@ import httpStatus from 'http-status'
 import { restoreVersionOperationGlobal } from 'payload/operations'
 import { isNumber } from 'payload/utilities'
 
-import type { GlobalRouteHandlerWithID } from '../types'
+import type { GlobalRouteHandlerWithID } from '../types.d.ts'
 
 export const restoreVersion: GlobalRouteHandlerWithID = async ({ id, globalConfig, req }) => {
   const { searchParams } = req

packages/next/src/routes/rest/globals/update.ts

@@ -2,7 +2,7 @@ import httpStatus from 'http-status'
 import { updateOperationGlobal } from 'payload/operations'
 import { isNumber } from 'payload/utilities'
 
-import type { GlobalRouteHandler } from '../types'
+import type { GlobalRouteHandler } from '../types.d.ts'
 
 export const update: GlobalRouteHandler = async ({ globalConfig, req }) => {
   const { searchParams } = req

packages/next/src/routes/rest/index.ts

@@ -9,40 +9,40 @@ import type {
   CollectionRouteHandlerWithID,
   GlobalRouteHandler,
   GlobalRouteHandlerWithID,
-} from './types'
+} from './types.d.ts'
 
-import { createPayloadRequest } from '../../utilities/createPayloadRequest'
-import { RouteError } from './RouteError'
-import { access } from './auth/access'
-import { forgotPassword } from './auth/forgotPassword'
-import { init } from './auth/init'
-import { login } from './auth/login'
-import { logout } from './auth/logout'
-import { me } from './auth/me'
-import { refresh } from './auth/refresh'
-import { registerFirstUser } from './auth/registerFirstUser'
-import { resetPassword } from './auth/resetPassword'
-import { unlock } from './auth/unlock'
-import { verifyEmail } from './auth/verifyEmail'
-import { buildFormState } from './buildFormState'
-import { endpointsAreDisabled } from './checkEndpoints'
-import { create } from './collections/create'
-import { deleteDoc } from './collections/delete'
-import { deleteByID } from './collections/deleteByID'
-import { docAccess } from './collections/docAccess'
-import { find } from './collections/find'
-import { findByID } from './collections/findByID'
-import { findVersionByID } from './collections/findVersionByID'
-import { findVersions } from './collections/findVersions'
-import { restoreVersion } from './collections/restoreVersion'
-import { update } from './collections/update'
-import { updateByID } from './collections/updateByID'
-import { docAccess as docAccessGlobal } from './globals/docAccess'
-import { findOne } from './globals/findOne'
-import { findVersionByID as findVersionByIdGlobal } from './globals/findVersionByID'
-import { findVersions as findVersionsGlobal } from './globals/findVersions'
-import { restoreVersion as restoreVersionGlobal } from './globals/restoreVersion'
-import { update as updateGlobal } from './globals/update'
+import { createPayloadRequest } from '../../utilities/createPayloadRequest.js'
+import { RouteError } from './RouteError.js'
+import { access } from './auth/access.js'
+import { forgotPassword } from './auth/forgotPassword.js'
+import { init } from './auth/init.js'
+import { login } from './auth/login.js'
+import { logout } from './auth/logout.js'
+import { me } from './auth/me.js'
+import { refresh } from './auth/refresh.js'
+import { registerFirstUser } from './auth/registerFirstUser.js'
+import { resetPassword } from './auth/resetPassword.js'
+import { unlock } from './auth/unlock.js'
+import { verifyEmail } from './auth/verifyEmail.js'
+import { buildFormState } from './buildFormState.js'
+import { endpointsAreDisabled } from './checkEndpoints.js'
+import { create } from './collections/create.js'
+import { deleteDoc } from './collections/delete.js'
+import { deleteByID } from './collections/deleteByID.js'
+import { docAccess } from './collections/docAccess.js'
+import { find } from './collections/find.js'
+import { findByID } from './collections/findByID.js'
+import { findVersionByID } from './collections/findVersionByID.js'
+import { findVersions } from './collections/findVersions.js'
+import { restoreVersion } from './collections/restoreVersion.js'
+import { update } from './collections/update.js'
+import { updateByID } from './collections/updateByID.js'
+import { docAccess as docAccessGlobal } from './globals/docAccess.js'
+import { findOne } from './globals/findOne.js'
+import { findVersionByID as findVersionByIdGlobal } from './globals/findVersionByID.js'
+import { findVersions as findVersionsGlobal } from './globals/findVersions.js'
+import { restoreVersion as restoreVersionGlobal } from './globals/restoreVersion.js'
+import { update as updateGlobal } from './globals/update.js'
 
 const endpoints = {
   collection: {

packages/next/src/utilities/createPayloadRequest.ts

@@ -13,10 +13,10 @@ import { getDataLoader } from 'payload/utilities'
 import QueryString from 'qs'
 import { URL } from 'url'
 
-import { getDataAndFile } from './getDataAndFile'
-import { getPayload } from './getPayload'
-import { getRequestLanguage } from './getRequestLanguage'
-import { getRequestLocales } from './getRequestLocales'
+import { getDataAndFile } from './getDataAndFile.js'
+import { getPayload } from './getPayload.js'
+import { getRequestLanguage } from './getRequestLanguage.js'
+import { getRequestLocales } from './getRequestLocales.js'
 
 type Args = {
   config: Promise<SanitizedConfig> | SanitizedConfig

packages/next/src/utilities/getDataAndFile.ts

@@ -1,6 +1,6 @@
 import type { Collection, CustomPayloadRequest, SanitizedConfig } from 'payload/types'
 
-import { nextFileUpload } from '../next-fileupload'
+import { nextFileUpload } from '../next-fileupload/index.js'
 
 type GetDataAndFile = (args: {
   collection: Collection

packages/next/src/utilities/getNextI18n.ts

@@ -3,9 +3,9 @@ import type { SanitizedConfig } from 'payload/types'
 
 import { initI18n } from '@payloadcms/translations'
 import { translations } from '@payloadcms/translations/client'
-import { cookies, headers } from 'next/headers'
+import { cookies, headers } from 'next/headers.js'
 
-import { getRequestLanguage } from './getRequestLanguage'
+import { getRequestLanguage } from './getRequestLanguage.js'
 
 export const getNextI18n = async ({
   config,

packages/next/src/utilities/getNextT.ts

@@ -3,9 +3,9 @@ import type { SanitizedConfig } from 'payload/types'
 
 import { initI18n } from '@payloadcms/translations'
 import { translations } from '@payloadcms/translations/client'
-import { cookies, headers } from 'next/headers'
+import { cookies, headers } from 'next/headers.js'
 
-import { getRequestLanguage } from './getRequestLanguage'
+import { getRequestLanguage } from './getRequestLanguage.js'
 
 export const getNextT = async ({
   config,

packages/next/src/utilities/getRequestLanguage.ts

@@ -1,4 +1,4 @@
-import type { ReadonlyRequestCookies } from 'next/dist/server/web/spec-extension/adapters/request-cookies'
+import type { ReadonlyRequestCookies } from 'next/dist/server/web/spec-extension/adapters/request-cookies.js'
 
 import { matchLanguage } from '@payloadcms/translations'
 

packages/next/src/utilities/initPage.ts

@@ -9,14 +9,14 @@ import type {
 import { initI18n } from '@payloadcms/translations'
 import { translations } from '@payloadcms/translations/client'
 import { findLocaleFromCode } from '@payloadcms/ui'
-import { headers as getHeaders } from 'next/headers'
-import { notFound, redirect } from 'next/navigation'
+import { headers as getHeaders } from 'next/headers.js'
+import { notFound, redirect } from 'next/navigation.js'
 import { createLocalReq } from 'payload/utilities'
 import qs from 'qs'
 
-import { getPayload } from '../utilities/getPayload'
-import { auth } from './auth'
-import { getRequestLanguage } from './getRequestLanguage'
+import { getPayload } from '../utilities/getPayload.js'
+import { auth } from './auth.js'
+import { getRequestLanguage } from './getRequestLanguage.js'
 
 type Args = {
   config: Promise<SanitizedConfig> | SanitizedConfig

packages/next/src/views/API/index.client.tsx

@@ -15,13 +15,13 @@ import {
   useLocale,
   useTranslation,
 } from '@payloadcms/ui'
-import { useSearchParams } from 'next/navigation'
+import { useSearchParams } from 'next/navigation.js'
 import qs from 'qs'
 import * as React from 'react'
 import { toast } from 'react-toastify'
 
-import { SetStepNav } from '../Edit/Default/SetStepNav'
-import { RenderJSON } from './RenderJSON'
+import { SetStepNav } from '../Edit/Default/SetStepNav/index.js'
+import { RenderJSON } from './RenderJSON/index.js'
 import './index.scss'
 
 const baseClass = 'query-inspector'

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

@@ -2,7 +2,7 @@ import type { ServerSideEditViewProps } from 'payload/types'
 
 import React from 'react'
 
-import { APIViewClient } from './index.client'
+import { APIViewClient } from './index.client.js'
 
 export const APIView: React.FC<ServerSideEditViewProps> = () => {
   return <APIViewClient />

packages/next/src/views/API/meta.ts

@@ -1,6 +1,6 @@
-import type { GenerateEditViewMetadata } from '../Document/getMetaBySegment'
+import type { GenerateEditViewMetadata } from '../Document/getMetaBySegment.js'
 
-import { meta } from '../../utilities/meta'
+import { meta } from '../../utilities/meta.js'
 
 export const generateMetadata: GenerateEditViewMetadata = async ({ config }) => {
   return meta({

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

@@ -3,7 +3,7 @@ import { Label, ReactSelect } from '@payloadcms/ui'
 import { useTranslation } from '@payloadcms/ui/providers'
 import React from 'react'
 
-import { ToggleTheme } from '../ToggleTheme'
+import { ToggleTheme } from '../ToggleTheme/index.js'
 import './index.scss'
 
 const baseClass = 'payload-settings'

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

@@ -1,8 +1,7 @@
 'use client'
 import type { OnChange, Theme } from '@payloadcms/ui'
 
-import { useTranslation } from '@payloadcms/ui'
-import { RadioGroupInput, useTheme } from '@payloadcms/ui'
+import { RadioGroupInput, useTheme, useTranslation } from '@payloadcms/ui'
 import React, { useCallback } from 'react'
 
 export const ToggleTheme: React.FC = () => {

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

@@ -7,15 +7,15 @@ import {
   buildStateFromSchema,
   formatFields,
 } from '@payloadcms/ui'
-import { notFound } from 'next/navigation'
+import { notFound } from 'next/navigation.js'
 import React, { Fragment } from 'react'
 
-import type { AdminViewProps } from '../Root'
+import type { AdminViewProps } from '../Root/index.d.ts'
 
-import { EditView } from '../Edit'
-import { Settings } from './Settings'
+import { EditView } from '../Edit/index.js'
+import { Settings } from './Settings/index.js'
 
-export { generateAccountMetadata } from './meta'
+export { generateAccountMetadata } from './meta.js'
 
 export const Account: React.FC<AdminViewProps> = async ({ initPageResult, searchParams }) => {
   const {

packages/next/src/views/Account/meta.ts

@@ -1,5 +1,6 @@
-import { meta } from '../../utilities/meta'
-import { GenerateViewMetadata } from '../Root'
+import type { GenerateViewMetadata } from '../Root/index.d.ts'
+
+import { meta } from '../../utilities/meta.js'
 
 export const generateAccountMetadata: GenerateViewMetadata = async ({ config, i18n: { t } }) => {
   return meta({

packages/next/src/views/CreateFirstUser/index.client.tsx

@@ -1,11 +1,13 @@
 'use client'
-import { FieldMap, RenderFields, useComponentMap } from '@payloadcms/ui'
+import type { FieldMap } from '@payloadcms/ui'
+
+import { RenderFields, useComponentMap } from '@payloadcms/ui'
 import React from 'react'
 
 export const CreateFirstUserFields: React.FC<{
-  userSlug: string
   createFirstUserFieldMap: FieldMap
-}> = ({ userSlug, createFirstUserFieldMap }) => {
+  userSlug: string
+}> = ({ createFirstUserFieldMap, userSlug }) => {
   const { getFieldMap } = useComponentMap()
 
   const fieldMap = getFieldMap({ collectionSlug: userSlug })

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

@@ -3,12 +3,12 @@ import type { Field } from 'payload/types'
 import { Form, FormSubmit, buildStateFromSchema, mapFields } from '@payloadcms/ui'
 import React from 'react'
 
-import type { AdminViewProps } from '../Root'
+import type { AdminViewProps } from '../Root/index.d.ts'
 
-import { CreateFirstUserFields } from './index.client'
+import { CreateFirstUserFields } from './index.client.js'
 import './index.scss'
 
-export { generateCreateFirstUserMetadata } from './meta'
+export { generateCreateFirstUserMetadata } from './meta.js'
 
 export const CreateFirstUser: React.FC<AdminViewProps> = async ({ initPageResult }) => {
   const {
@@ -47,8 +47,8 @@ export const CreateFirstUser: React.FC<AdminViewProps> = async ({ initPageResult
   ]
 
   const createFirstUserFieldMap = mapFields({
-    fieldSchema: fields,
     config,
+    fieldSchema: fields,
     parentPath: userSlug,
   })
 
@@ -71,8 +71,8 @@ export const CreateFirstUser: React.FC<AdminViewProps> = async ({ initPageResult
         validationOperation="create"
       >
         <CreateFirstUserFields
-          userSlug={userSlug}
           createFirstUserFieldMap={createFirstUserFieldMap}
+          userSlug={userSlug}
         />
         <FormSubmit>{req.t('general:create')}</FormSubmit>
       </Form>

packages/next/src/views/CreateFirstUser/meta.ts

@@ -1,5 +1,6 @@
-import { meta } from '../../utilities/meta'
-import { GenerateViewMetadata } from '../Root'
+import type { GenerateViewMetadata } from '../Root/index.d.ts'
+
+import { meta } from '../../utilities/meta.js'
 
 export const generateCreateFirstUserMetadata: GenerateViewMetadata = async ({
   config,

packages/next/src/views/Dashboard/Default/index.client.tsx

@@ -1,5 +1,6 @@
 'use client'
 import type { EntityToGroup, Group } from '@payloadcms/ui'
+import type { Permissions } from 'payload/auth'
 
 import { getTranslation } from '@payloadcms/translations'
 import {
@@ -15,16 +16,15 @@ import {
 import React, { Fragment, useEffect, useState } from 'react'
 
 import './index.scss'
-import { Permissions } from 'payload/auth'
 
 const baseClass = 'dashboard'
 
 export const DefaultDashboardClient: React.FC<{
   Link: React.ComponentType
+  permissions: Permissions
   visibleCollections: string[]
   visibleGlobals: string[]
-  permissions: Permissions
-}> = ({ Link, visibleCollections, visibleGlobals, permissions }) => {
+}> = ({ Link, permissions, visibleCollections, visibleGlobals }) => {
   const config = useConfig()
 
   const {

packages/next/src/views/Dashboard/Default/index.tsx

@@ -1,20 +1,20 @@
+import type { Permissions } from 'payload/auth'
 import type { SanitizedConfig } from 'payload/types'
 
 import { Gutter, SetStepNav, SetViewActions } from '@payloadcms/ui'
 import React from 'react'
 
-import { DefaultDashboardClient } from './index.client'
+import { DefaultDashboardClient } from './index.client.js'
 import './index.scss'
-import { Permissions } from 'payload/auth'
 
 const baseClass = 'dashboard'
 
 export type DashboardProps = {
   Link: React.ComponentType<any>
   config: SanitizedConfig
+  permissions: Permissions
   visibleCollections: string[]
   visibleGlobals: string[]
-  permissions: Permissions
 }
 
 export const DefaultDashboard: React.FC<DashboardProps> = (props) => {
@@ -25,9 +25,9 @@ export const DefaultDashboard: React.FC<DashboardProps> = (props) => {
         components: { afterDashboard, beforeDashboard },
       },
     },
+    permissions,
     visibleCollections,
     visibleGlobals,
-    permissions,
   } = props
 
   return (
@@ -39,9 +39,9 @@ export const DefaultDashboard: React.FC<DashboardProps> = (props) => {
           beforeDashboard.map((Component, i) => <Component key={i} />)}
         <DefaultDashboardClient
           Link={Link}
+          permissions={permissions}
           visibleCollections={visibleCollections}
           visibleGlobals={visibleGlobals}
-          permissions={permissions}
         />
         {Array.isArray(afterDashboard) &&
           afterDashboard.map((Component, i) => <Component key={i} />)}

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

@@ -1,14 +1,16 @@
 import { HydrateClientUser, RenderCustomComponent } from '@payloadcms/ui'
-import Link from 'next/link'
+import LinkImport from 'next/link.js'
 import { isEntityHidden } from 'payload/utilities'
 import React, { Fragment } from 'react'
 
-import type { AdminViewProps } from '../Root'
-import type { DashboardProps } from './Default'
+import type { AdminViewProps } from '../Root/index.d.ts'
+import type { DashboardProps } from './Default/index.d.ts'
 
-import { DefaultDashboard } from './Default'
+import { DefaultDashboard } from './Default/index.js'
 
-export { generateDashboardMetadata } from './meta'
+export { generateDashboardMetadata } from './meta.js'
+
+const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default
 
 export const Dashboard: React.FC<AdminViewProps> = ({
   initPageResult,
@@ -41,9 +43,9 @@ export const Dashboard: React.FC<AdminViewProps> = ({
   const componentProps: DashboardProps = {
     Link,
     config,
+    permissions,
     visibleCollections,
     visibleGlobals,
-    permissions,
   }
 
   return (

packages/next/src/views/Dashboard/meta.ts

@@ -1,5 +1,6 @@
-import { meta } from '../../utilities/meta'
-import { GenerateViewMetadata } from '../Root'
+import type { GenerateViewMetadata } from '../Root/index.d.ts'
+
+import { meta } from '../../utilities/meta.js'
 
 export const generateDashboardMetadata: GenerateViewMetadata = async ({ config, i18n: { t } }) => {
   return meta({

packages/next/src/views/Document/getMetaBySegment.tsx

@@ -1,14 +1,15 @@
 import type { Metadata } from 'next'
 import type { SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload/types'
 
-import { getNextI18n } from '../../utilities/getNextI18n'
-import { generateMetadata as apiMeta } from '../API/meta'
-import { generateMetadata as editMeta } from '../Edit/meta'
-import { generateMetadata as livePreviewMeta } from '../LivePreview/meta'
-import { generateMetadata as versionMeta } from '../Version/meta'
-import { generateMetadata as versionsMeta } from '../Versions/meta'
-import { GenerateViewMetadata } from '../Root'
-import { generateNotFoundMeta } from '../NotFound/meta'
+import type { GenerateViewMetadata } from '../Root/index.d.ts'
+
+import { getNextI18n } from '../../utilities/getNextI18n.js'
+import { generateMetadata as apiMeta } from '../API/meta.js'
+import { generateMetadata as editMeta } from '../Edit/meta.js'
+import { generateMetadata as livePreviewMeta } from '../LivePreview/meta.js'
+import { generateNotFoundMeta } from '../NotFound/meta.js'
+import { generateMetadata as versionMeta } from '../Version/meta.js'
+import { generateMetadata as versionsMeta } from '../Versions/meta.js'
 
 export type GenerateEditViewMetadata = (
   args: Parameters<GenerateViewMetadata>[0] & {
@@ -19,10 +20,10 @@ export type GenerateEditViewMetadata = (
 ) => Promise<Metadata>
 
 export const getMetaBySegment: GenerateEditViewMetadata = async ({
-  config,
-  params,
   collectionConfig,
+  config,
   globalConfig,
+  params,
 }) => {
   const { segments } = params
 

packages/next/src/views/Document/getViewsFromConfig.tsx

@@ -8,13 +8,13 @@ import type {
 
 import { isEntityHidden } from 'payload/utilities'
 
-import { APIView as DefaultAPIView } from '../API'
-import { EditView as DefaultEditView } from '../Edit'
-import { LivePreviewView as DefaultLivePreviewView } from '../LivePreview'
-import { VersionView as DefaultVersionView } from '../Version'
-import { VersionsView as DefaultVersionsView } from '../Versions'
-import { getCustomViewByKey } from './getCustomViewByKey'
-import { getCustomViewByPath } from './getCustomViewByPath'
+import { APIView as DefaultAPIView } from '../API/index.js'
+import { EditView as DefaultEditView } from '../Edit/index.js'
+import { LivePreviewView as DefaultLivePreviewView } from '../LivePreview/index.js'
+import { VersionView as DefaultVersionView } from '../Version/index.js'
+import { VersionsView as DefaultVersionsView } from '../Versions/index.js'
+import { getCustomViewByKey } from './getCustomViewByKey.js'
+import { getCustomViewByPath } from './getCustomViewByPath.js'
 
 export const getViewsFromConfig = async ({
   collectionConfig,

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

@@ -17,16 +17,15 @@ import {
   buildStateFromSchema,
   formatFields,
 } from '@payloadcms/ui'
-import queryString from 'qs'
 import React, { Fragment } from 'react'
 
-import type { AdminViewProps } from '../Root'
-import type { GenerateEditViewMetadata } from './getMetaBySegment'
+import type { AdminViewProps } from '../Root/index.d.ts'
+import type { GenerateEditViewMetadata } from './getMetaBySegment.d.ts'
 
-import { formatTitle } from '../Edit/Default/SetDocumentTitle/formatTitle'
-import { NotFoundClient } from '../NotFound/index.client'
-import { getMetaBySegment } from './getMetaBySegment'
-import { getViewsFromConfig } from './getViewsFromConfig'
+import { formatTitle } from '../Edit/Default/SetDocumentTitle/formatTitle.js'
+import { NotFoundClient } from '../NotFound/index.client.js'
+import { getMetaBySegment } from './getMetaBySegment.js'
+import { getViewsFromConfig } from './getViewsFromConfig.js'
 
 export const generateMetadata: GenerateEditViewMetadata = async (args) => getMetaBySegment(args)
 
@@ -204,7 +203,7 @@ export const Document: React.FC<AdminViewProps> = async ({
         docPreferences={docPreferences}
         globalSlug={globalConfig?.slug}
         hasSavePermission={hasSavePermission}
-        id={id}
+        id={id || ''}
         initialData={data}
         initialState={initialState}
         title={formatTitle({

packages/next/src/views/Document/meta.ts

@@ -1,4 +1,6 @@
-import { GenerateEditViewMetadata, getMetaBySegment } from './getMetaBySegment'
+import type { GenerateEditViewMetadata } from './getMetaBySegment.js'
+
+import { getMetaBySegment } from './getMetaBySegment.js'
 
 export const generateDocumentMetadata: GenerateEditViewMetadata = async (args) =>
   getMetaBySegment(args)

packages/next/src/views/Edit/Default/Auth/index.tsx

@@ -13,9 +13,9 @@ import {
 import React, { useCallback, useEffect, useState } from 'react'
 import { toast } from 'react-toastify'
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
-import APIKey from './APIKey'
+import APIKey from './APIKey.js'
 import './index.scss'
 
 const baseClass = 'auth-fields'
@@ -47,8 +47,8 @@ const Auth: React.FC<Props> = (props) => {
   const handleChangePassword = useCallback(
     async (state: boolean) => {
       if (!state) {
-        dispatchFields({ path: 'password', type: 'REMOVE' })
-        dispatchFields({ path: 'confirm-password', type: 'REMOVE' })
+        dispatchFields({ type: 'REMOVE', path: 'password' })
+        dispatchFields({ type: 'REMOVE', path: 'confirm-password' })
       }
 
       setChangingPassword(state)

packages/next/src/views/Edit/Default/SetDocumentTitle/formatTitle.ts

@@ -1,19 +1,25 @@
-import { I18n, getTranslation } from '@payloadcms/translations'
+import type { I18n } from '@payloadcms/translations'
+import type {
+  SanitizedCollectionConfig,
+  SanitizedConfig,
+  SanitizedGlobalConfig,
+} from 'payload/types'
+
+import { getTranslation } from '@payloadcms/translations'
 import { formatDate } from '@payloadcms/ui'
-import { SanitizedCollectionConfig, SanitizedConfig, SanitizedGlobalConfig } from 'payload/types'
 
 export const formatTitle = ({
-  value,
   collectionConfig,
+  dateFormat: dateFormatFromConfig,
   globalConfig,
   i18n,
-  dateFormat: dateFormatFromConfig,
+  value,
 }: {
-  value: string
   collectionConfig?: SanitizedCollectionConfig
+  dateFormat: SanitizedConfig['admin']['dateFormat']
   globalConfig?: SanitizedGlobalConfig
   i18n: I18n
-  dateFormat: SanitizedConfig['admin']['dateFormat']
+  value: string
 }): string => {
   let title: string = value
 

packages/next/src/views/Edit/Default/SetDocumentTitle/index.tsx

@@ -3,7 +3,8 @@ import type { ClientConfig } from 'payload/types'
 
 import { useDocumentInfo, useFormFields, useTranslation } from '@payloadcms/ui'
 import { useEffect } from 'react'
-import { formatTitle } from './formatTitle'
+
+import { formatTitle } from './formatTitle.js'
 
 export const SetDocumentTitle: React.FC<{
   collectionConfig?: ClientConfig['collections'][0]
@@ -23,16 +24,16 @@ export const SetDocumentTitle: React.FC<{
   const dateFormatFromConfig = config?.admin?.dateFormat
 
   const title = formatTitle({
+    collectionConfig,
+    dateFormat: dateFormatFromConfig,
+    globalConfig,
+    i18n,
     value:
       typeof field === 'string'
         ? field
         : typeof field === 'number'
           ? String(field)
           : (field?.value as string),
-    collectionConfig,
-    globalConfig,
-    i18n,
-    dateFormat: dateFormatFromConfig,
   })
 
   useEffect(() => {

packages/next/src/views/Edit/Default/index.tsx

@@ -17,11 +17,11 @@ import {
 import { Upload } from '@payloadcms/ui/elements'
 import React, { Fragment, useCallback } from 'react'
 
-import { LeaveWithoutSaving } from '../../../elements/LeaveWithoutSaving'
+import { LeaveWithoutSaving } from '../../../elements/LeaveWithoutSaving/index.js'
 // import { getTranslation } from '@payloadcms/translations'
-import Auth from './Auth'
-import { SetDocumentTitle } from './SetDocumentTitle'
-import { SetStepNav } from './SetStepNav'
+import Auth from './Auth/index.js'
+import { SetDocumentTitle } from './SetDocumentTitle/index.js'
+import { SetStepNav } from './SetStepNav/index.js'
 import './index.scss'
 
 const baseClass = 'collection-edit'

packages/next/src/views/Edit/index.client.tsx

@@ -8,7 +8,7 @@ import {
   useDocumentInfo,
   useFormQueryParams,
 } from '@payloadcms/ui'
-import { useRouter } from 'next/navigation'
+import { useRouter } from 'next/navigation.js'
 import React, { Fragment, useEffect } from 'react'
 import { useCallback } from 'react'
 
@@ -60,10 +60,9 @@ export const EditViewClient: React.FC = () => {
   )
 
   useEffect(() => {
-    setDocumentInfo((current) => ({
-      ...current,
+    setDocumentInfo({
       onSave,
-    }))
+    })
   }, [setDocumentInfo, onSave])
 
   // Allow the `DocumentInfoProvider` to hydrate

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

@@ -2,7 +2,7 @@ import type { ServerSideEditViewProps } from 'payload/types'
 
 import React from 'react'
 
-import { EditViewClient } from './index.client'
+import { EditViewClient } from './index.client.js'
 
 export const EditView: React.FC<ServerSideEditViewProps> = () => {
   return <EditViewClient />

packages/next/src/views/Edit/meta.ts

@@ -2,9 +2,9 @@ import type { Metadata } from 'next'
 
 import { getTranslation } from '@payloadcms/translations'
 
-import type { GenerateEditViewMetadata } from '../Document/getMetaBySegment'
+import type { GenerateEditViewMetadata } from '../Document/getMetaBySegment.js'
 
-import { meta } from '../../utilities/meta'
+import { meta } from '../../utilities/meta.js'
 
 export const generateMetadata: GenerateEditViewMetadata = async ({
   collectionConfig,

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

@@ -1,11 +1,12 @@
 import { Button, Email, Form, FormSubmit, Translation } from '@payloadcms/ui'
-import Link from 'next/link'
+import LinkImport from 'next/link.js'
 import React, { Fragment } from 'react'
 
-import type { AdminViewProps } from '../Root'
+import type { AdminViewProps } from '../Root/index.js'
 
-export { generateForgotPasswordMetadata } from './meta'
+export { generateForgotPasswordMetadata } from './meta.js'
 
+const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default
 export const forgotPasswordBaseClass = 'forgot-password'
 
 export const ForgotPassword: React.FC<AdminViewProps> = ({ initPageResult }) => {

packages/next/src/views/ForgotPassword/meta.ts

@@ -1,4 +1,4 @@
-import { meta } from '../../utilities/meta'
+import { meta } from '../../utilities/meta.js'
 
 export const generateForgotPasswordMetadata = async ({ config, i18n: { t } }) => {
   return meta({

packages/next/src/views/List/Default/Cell/fields/Relationship/index.tsx

@@ -5,7 +5,7 @@ import { getTranslation } from '@payloadcms/translations'
 import { canUseDOM, formatDocTitle, useConfig, useIntersect, useTranslation } from '@payloadcms/ui'
 import React, { useEffect, useState } from 'react'
 
-import { useListRelationships } from '../../../RelationshipProvider'
+import { useListRelationships } from '../../../RelationshipProvider/index.js'
 import './index.scss'
 
 type Value = { relationTo: string; value: number | string }

packages/next/src/views/List/Default/Cell/fields/index.tsx

@@ -1,13 +1,13 @@
-import { ArrayCell } from './Array'
-import { BlocksCell } from './Blocks'
-import { CheckboxCell } from './Checkbox'
-import { CodeCell } from './Code'
-import { DateCell } from './Date'
-import { FileCell } from './File'
-import { JSONCell } from './JSON'
-import { RelationshipCell } from './Relationship'
-import { SelectCell } from './Select'
-import { TextareaCell } from './Textarea'
+import { ArrayCell } from './Array/index.js'
+import { BlocksCell } from './Blocks/index.js'
+import { CheckboxCell } from './Checkbox/index.js'
+import { CodeCell } from './Code/index.js'
+import { DateCell } from './Date/index.js'
+import { FileCell } from './File/index.js'
+import { JSONCell } from './JSON/index.js'
+import { RelationshipCell } from './Relationship/index.js'
+import { SelectCell } from './Select/index.js'
+import { TextareaCell } from './Textarea/index.js'
 
 export default {
   File: FileCell,

packages/next/src/views/List/Default/Cell/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import Link from 'next/link'
+import LinkImport from 'next/link.js'
 import React from 'react' // TODO: abstract this out to support all routers
 
 import type { CellProps } from 'payload/types'
@@ -8,8 +8,10 @@ import { getTranslation } from '@payloadcms/translations'
 import { useConfig, useTableCell, useTranslation } from '@payloadcms/ui'
 import { TableCellProvider } from '@payloadcms/ui'
 
-import cellComponents from './fields'
-import { CodeCell } from './fields/Code'
+import { CodeCell } from './fields/Code/index.js'
+import cellComponents from './fields/index.js'
+
+const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default
 
 export const DefaultCell: React.FC<CellProps> = (props) => {
   const {

packages/next/src/views/List/Default/RelationshipProvider/index.tsx

@@ -5,7 +5,7 @@ import { useConfig, useDebounce, useLocale, useTranslation } from '@payloadcms/u
 import querystring from 'qs'
 import React, { createContext, useCallback, useContext, useEffect, useReducer, useRef } from 'react'
 
-import { reducer } from './reducer'
+import { reducer } from './reducer.js'
 
 // documents are first set to null when requested
 // set to false when no doc is returned
@@ -73,14 +73,14 @@ export const RelationshipProvider: React.FC<{ children?: React.ReactNode }> = ({
             const json = await result.json()
             if (json.docs) {
               dispatchDocuments({
+                type: 'ADD_LOADED',
                 docs: json.docs,
                 idsToLoad,
                 relationTo: slug,
-                type: 'ADD_LOADED',
               })
             }
           } else {
-            dispatchDocuments({ docs: [], idsToLoad, relationTo: slug, type: 'ADD_LOADED' })
+            dispatchDocuments({ type: 'ADD_LOADED', docs: [], idsToLoad, relationTo: slug })
           }
         }
       })
@@ -95,7 +95,7 @@ export const RelationshipProvider: React.FC<{ children?: React.ReactNode }> = ({
 
   const getRelationships = useCallback(
     async (relationships: { relationTo: string; value: number | string }[]) => {
-      dispatchDocuments({ docs: relationships, type: 'REQUEST' })
+      dispatchDocuments({ type: 'REQUEST', docs: relationships })
     },
     [],
   )

packages/next/src/views/List/Default/RelationshipProvider/reducer.ts

@@ -1,6 +1,6 @@
 import type { TypeWithID } from 'payload/types'
 
-import type { Documents } from './index'
+import type { Documents } from './index.js'
 
 type RequestDocuments = {
   docs: { relationTo: string; value: number | string }[]

packages/next/src/views/List/Default/index.tsx

@@ -25,16 +25,17 @@ import {
   SetViewActions,
   UnpublishMany,
 } from '@payloadcms/ui/elements'
-import Link from 'next/link'
+import LinkImport from 'next/link.js'
 import { formatFilesize } from 'payload/utilities'
 import React, { Fragment, useEffect } from 'react'
 
-import type { CollectionComponentMap } from '../../../../../ui/src/utilities/buildComponentMap/types'
+import type { CollectionComponentMap } from '../../../../../ui/src/utilities/buildComponentMap/types.d.ts'
 
-import { RelationshipProvider } from './RelationshipProvider'
+import { RelationshipProvider } from './RelationshipProvider/index.js'
 import './index.scss'
 
 const baseClass = 'collection-list'
+const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default
 
 export const DefaultListView: React.FC = () => {
   const {
@@ -98,7 +99,6 @@ export const DefaultListView: React.FC = () => {
     <div className={baseClass}>
       <SetViewActions actions={actionsMap?.List} />
       {BeforeList}
-      {/* <Meta title={getTranslation(collection.labels.plural, i18n)} /> */}
       <SelectionProvider docs={data.docs} totalDocs={data.totalDocs}>
         <Gutter className={`${baseClass}__wrap`}>
           <header className={`${baseClass}__header`}>

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

@@ -4,16 +4,16 @@ import {
   RenderCustomComponent,
   TableColumnsProvider,
 } from '@payloadcms/ui'
-import { notFound } from 'next/navigation'
+import { notFound } from 'next/navigation.js'
 import { isEntityHidden } from 'payload/utilities'
 import React, { Fragment } from 'react'
 
-import type { AdminViewProps } from '../Root'
-import type { DefaultListViewProps, ListPreferences } from './Default/types'
+import type { AdminViewProps } from '../Root/index.d.ts'
+import type { DefaultListViewProps, ListPreferences } from './Default/types.d.ts'
 
-import { DefaultListView } from './Default'
+import { DefaultListView } from './Default/index.js'
 
-export { generateListMetadata } from './meta'
+export { generateListMetadata } from './meta.js'
 
 export const ListView: React.FC<AdminViewProps> = async ({ initPageResult, searchParams }) => {
   const {

packages/next/src/views/List/meta.ts

@@ -1,8 +1,11 @@
-import { meta } from '../../utilities/meta'
+import type { Metadata } from 'next'
+import type { SanitizedCollectionConfig } from 'payload/types'
+
 import { getTranslation } from '@payloadcms/translations'
-import { GenerateViewMetadata } from '../Root'
-import { Metadata } from 'next'
-import { SanitizedCollectionConfig } from 'payload/types'
+
+import type { GenerateViewMetadata } from '../Root/index.d.ts'
+
+import { meta } from '../../utilities/meta.js'
 
 export const generateListMetadata = async (
   args: Parameters<GenerateViewMetadata>[0] & {

packages/next/src/views/LivePreview/Context/context.ts

@@ -4,8 +4,8 @@ import type { Dispatch } from 'react'
 
 import { createContext, useContext } from 'react'
 
-import type { usePopupWindow } from '../usePopupWindow'
-import type { SizeReducerAction } from './sizeReducer'
+import type { usePopupWindow } from '../usePopupWindow.d.ts'
+import type { SizeReducerAction } from './sizeReducer.d.ts'
 
 export interface LivePreviewContextType {
   appIsReady: boolean

packages/next/src/views/LivePreview/Context/index.tsx

@@ -4,11 +4,11 @@ import type { LivePreviewConfig } from 'payload/config'
 import { DndContext } from '@dnd-kit/core'
 import React, { useCallback, useEffect, useState } from 'react'
 
-import type { usePopupWindow } from '../usePopupWindow'
+import type { usePopupWindow } from '../usePopupWindow.d.ts'
 
-import { customCollisionDetection } from './collisionDetection'
-import { LivePreviewContext } from './context'
-import { sizeReducer } from './sizeReducer'
+import { customCollisionDetection } from './collisionDetection.js'
+import { LivePreviewContext } from './context.js'
+import { sizeReducer } from './sizeReducer.js'
 
 export type LivePreviewProviderProps = {
   appIsReady?: boolean

packages/next/src/views/LivePreview/Device/index.tsx

@@ -2,7 +2,7 @@
 import { useResize } from '@payloadcms/ui'
 import React, { useEffect } from 'react'
 
-import { useLivePreviewContext } from '../Context/context'
+import { useLivePreviewContext } from '../Context/context.js'
 
 export const DeviceContainer: React.FC<{
   children: React.ReactNode

packages/next/src/views/LivePreview/DeviceContainer/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 import React from 'react'
 
-import { useLivePreviewContext } from '../Context/context'
+import { useLivePreviewContext } from '../Context/context.js'
 
 export const DeviceContainer: React.FC<{
   children: React.ReactNode

packages/next/src/views/LivePreview/IFrame/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 import React, { forwardRef } from 'react'
 
-import { useLivePreviewContext } from '../Context/context'
+import { useLivePreviewContext } from '../Context/context.js'
 import './index.scss'
 
 const baseClass = 'live-preview-iframe'

packages/next/src/views/LivePreview/Preview/index.tsx

@@ -10,10 +10,10 @@ import {
 } from '@payloadcms/ui'
 import React, { useEffect } from 'react'
 
-import { useLivePreviewContext } from '../Context/context'
-import { DeviceContainer } from '../Device'
-import { IFrame } from '../IFrame'
-import { LivePreviewToolbar } from '../Toolbar'
+import { useLivePreviewContext } from '../Context/context.js'
+import { DeviceContainer } from '../Device/index.js'
+import { IFrame } from '../IFrame/index.js'
+import { LivePreviewToolbar } from '../Toolbar/index.js'
 import './index.scss'
 
 const baseClass = 'live-preview-window'