fix: imports (part 2/2) (#13520)

Completes https://github.com/payloadcms/payload/pull/13513

That PR fixed it for the `admin` suite, but I had also encountered the
same issue in `live-preview`.

When searching for instances, I found others with the same pattern
within packages, which I took the opportunity to fix in case the same
error occurs in the future.

packages/payload/src/fields/baseFields/baseIDField.ts

@@ -2,8 +2,7 @@ import ObjectIdImport from 'bson-objectid'
 
 import type { TextField } from '../config/types.js'
 
-const ObjectId = (ObjectIdImport.default ||
+const ObjectId = 'default' in ObjectIdImport ? ObjectIdImport.default : ObjectIdImport
-  ObjectIdImport) as unknown as typeof ObjectIdImport.default
 
 export const baseIDField: TextField = {
   name: 'id',

packages/payload/src/fields/validations.ts

@@ -1,8 +1,7 @@
 import Ajv from 'ajv'
 import ObjectIdImport from 'bson-objectid'
 
-const ObjectId = (ObjectIdImport.default ||
+const ObjectId = 'default' in ObjectIdImport ? ObjectIdImport.default : ObjectIdImport
-  ObjectIdImport) as unknown as typeof ObjectIdImport.default
 
 import type { TFunction } from '@payloadcms/translations'
 import type { JSONSchema4 } from 'json-schema'

packages/payload/src/queues/errors/handleTaskError.ts

@@ -9,8 +9,7 @@ import { getCurrentDate } from '../utilities/getCurrentDate.js'
 import { calculateBackoffWaitUntil } from './calculateBackoffWaitUntil.js'
 import { getWorkflowRetryBehavior } from './getWorkflowRetryBehavior.js'
 
-const ObjectId = (ObjectIdImport.default ||
+const ObjectId = 'default' in ObjectIdImport ? ObjectIdImport.default : ObjectIdImport
-  ObjectIdImport) as unknown as typeof ObjectIdImport.default
 
 export async function handleTaskError({
   error,

packages/payload/src/queues/operations/runJobs/runJob/getRunTaskFunction.ts

@@ -23,8 +23,7 @@ import { TaskError } from '../../../errors/index.js'
 import { getCurrentDate } from '../../../utilities/getCurrentDate.js'
 import { getTaskHandlerFromConfig } from './importHandlerPath.js'
 
-const ObjectId = (ObjectIdImport.default ||
+const ObjectId = 'default' in ObjectIdImport ? ObjectIdImport.default : ObjectIdImport
-  ObjectIdImport) as unknown as typeof ObjectIdImport.default
 
 export type TaskParent = {
   taskID: string

packages/payload/src/utilities/isValidID.ts

@@ -1,7 +1,6 @@
 import ObjectIdImport from 'bson-objectid'
 
-const ObjectId = (ObjectIdImport.default ||
+const ObjectId = 'default' in ObjectIdImport ? ObjectIdImport.default : ObjectIdImport
-  ObjectIdImport) as unknown as typeof ObjectIdImport.default
 
 export const isValidID = (
   value: number | string,

packages/ui/src/elements/CodeEditor/CodeEditor.tsx

@@ -8,7 +8,7 @@ import { useTheme } from '../../providers/Theme/index.js'
 import { ShimmerEffect } from '../ShimmerEffect/index.js'
 import './index.scss'
 
-const Editor = (EditorImport.default || EditorImport) as unknown as typeof EditorImport.default
+const Editor = 'default' in EditorImport ? EditorImport.default : EditorImport
 
 const baseClass = 'code-editor'
 

packages/ui/src/elements/DatePicker/DatePicker.tsx

@@ -3,8 +3,10 @@ import type { DatePickerProps } from 'react-datepicker'
 
 import React from 'react'
 import ReactDatePickerDefaultImport, { registerLocale, setDefaultLocale } from 'react-datepicker'
-const ReactDatePicker = (ReactDatePickerDefaultImport.default ||
+const ReactDatePicker =
-  ReactDatePickerDefaultImport) as unknown as typeof ReactDatePickerDefaultImport.default
+  'default' in ReactDatePickerDefaultImport
+    ? ReactDatePickerDefaultImport.default
+    : ReactDatePickerDefaultImport
 
 import type { Props } from './types.js'
 

packages/ui/src/elements/Link/index.tsx

@@ -6,8 +6,7 @@ import React from 'react'
 import { useRouteTransition } from '../../providers/RouteTransition/index.js'
 import { formatUrl } from './formatUrl.js'
 
-const NextLink = (NextLinkImport.default ||
+const NextLink = 'default' in NextLinkImport ? NextLinkImport.default : NextLinkImport
-  NextLinkImport) as unknown as typeof NextLinkImport.default
 
 // Copied from  https://github.com/vercel/next.js/blob/canary/packages/next/src/client/link.tsx#L180-L191
 function isModifiedEvent(event: React.MouseEvent): boolean {

packages/ui/src/fields/Join/index.tsx

@@ -24,8 +24,7 @@ import { FieldError } from '../FieldError/index.js'
 import { FieldLabel } from '../FieldLabel/index.js'
 import { fieldBaseClass } from '../index.js'
 
-const ObjectId = (ObjectIdImport.default ||
+const ObjectId = 'default' in ObjectIdImport ? ObjectIdImport.default : ObjectIdImport
-  ObjectIdImport) as unknown as typeof ObjectIdImport.default
 
 /**
  * Recursively builds the default data for joined collection

packages/ui/src/forms/Form/fieldReducer.ts

@@ -10,8 +10,7 @@ import type { FieldAction } from './types.js'
 import { mergeServerFormState } from './mergeServerFormState.js'
 import { flattenRows, separateRows } from './rows.js'
 
-const ObjectId = (ObjectIdImport.default ||
+const ObjectId = 'default' in ObjectIdImport ? ObjectIdImport.default : ObjectIdImport
-  ObjectIdImport) as unknown as typeof ObjectIdImport.default
 
 /**
  * Reducer which modifies the form field state (all the current data of the fields in the form). When called using dispatch, it will return a new state object.

packages/ui/src/forms/fieldSchemasToFormState/addFieldStatePromise.ts

@@ -37,8 +37,7 @@ import { resolveFilterOptions } from '../../utilities/resolveFilterOptions.js'
 import { isRowCollapsed } from './isRowCollapsed.js'
 import { iterateFields } from './iterateFields.js'
 
-const ObjectId = (ObjectIdImport.default ||
+const ObjectId = 'default' in ObjectIdImport ? ObjectIdImport.default : ObjectIdImport
-  ObjectIdImport) as unknown as typeof ObjectIdImport.default
 
 export type AddFieldStatePromiseArgs = {
   addErrorPathToParent: (fieldPath: string) => void

packages/ui/src/utilities/copyDataFromLocale.ts

@@ -11,8 +11,7 @@ import {
 } from 'payload'
 import { fieldAffectsData, fieldShouldBeLocalized, tabHasName } from 'payload/shared'
 
-const ObjectId = (ObjectIdImport.default ||
+const ObjectId = 'default' in ObjectIdImport ? ObjectIdImport.default : ObjectIdImport
-  ObjectIdImport) as unknown as typeof ObjectIdImport.default
 
 export type CopyDataFromLocaleArgs = {
   collectionSlug?: CollectionSlug

test/helpers/bootAdminPanel.mjs

@@ -2,7 +2,7 @@ import { createServer } from 'http'
 import next from 'next'
 import { parse } from 'url'
 
-const actualNext = next.default || next
+const actualNext = 'default' in next ? next.default : next
 export const bootAdminPanel = async ({ port = 3000, appDir }) => {
   const serverURL = `http://localhost:${port}`
   const app = actualNext({

test/live-preview/app/live-preview/_components/Button/index.tsx

@@ -7,7 +7,7 @@ import React from 'react'
 
 import classes from './index.module.scss'
 
-const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
+const Link = 'default' in LinkWithDefault ? LinkWithDefault.default : LinkWithDefault
 
 export type Props = {
   appearance?: 'default' | 'none' | 'primary' | 'secondary'

test/live-preview/app/live-preview/_components/Card/index.tsx

@@ -6,7 +6,7 @@ import type { Post } from '../../../../payload-types.js'
 import { Media } from '../Media/index.js'
 import classes from './index.module.scss'
 
-const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
+const Link = 'default' in LinkWithDefault ? LinkWithDefault.default : LinkWithDefault
 
 export const Card: React.FC<{
   alignItems?: 'center'

test/live-preview/app/live-preview/_components/Footer/index.tsx

@@ -6,7 +6,7 @@ import { Gutter } from '../Gutter/index.js'
 import { CMSLink } from '../Link/index.js'
 import classes from './index.module.scss'
 
-const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
+const Link = 'default' in LinkWithDefault ? LinkWithDefault.default : LinkWithDefault
 
 export async function Footer() {
   const footer = await getFooter()

test/live-preview/app/live-preview/_components/Header/index.tsx

@@ -6,7 +6,7 @@ import { Gutter } from '../Gutter/index.js'
 import classes from './index.module.scss'
 import { HeaderNav } from './Nav/index.js'
 
-const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
+const Link = 'default' in LinkWithDefault ? LinkWithDefault.default : LinkWithDefault
 
 export async function Header() {
   const header = await getHeader()

test/live-preview/app/live-preview/_components/Link/index.tsx

@@ -6,7 +6,7 @@ import type { Props as ButtonProps } from '../Button/index.js'
 
 import { Button } from '../Button/index.js'
 
-const NextLink = (NextLinkImport.default || NextLinkImport) as typeof NextLinkImport.default
+const NextLink = 'default' in NextLinkImport ? NextLinkImport.default : NextLinkImport
 
 type CMSLinkType = {
   appearance?: ButtonProps['appearance']

test/live-preview/app/live-preview/_components/Media/Image/index.tsx

@@ -13,8 +13,8 @@ import classes from './index.module.scss'
 
 const { breakpoints } = cssVariables
 
-const NextImage = (NextImageWithDefault.default ||
+const NextImage =
-  NextImageWithDefault) as typeof NextImageWithDefault.default
+  'default' in NextImageWithDefault ? NextImageWithDefault.default : NextImageWithDefault
 
 export const Image: React.FC<MediaProps> = (props) => {
   const {

test/live-preview/app/live-preview/_heros/PostHero/index.tsx

@@ -10,7 +10,7 @@ import RichText from '../../_components/RichText/index.js'
 import { formatDateTime } from '../../_utilities/formatDateTime.js'
 import classes from './index.module.scss'
 
-const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
+const Link = 'default' in LinkWithDefault ? LinkWithDefault.default : LinkWithDefault
 
 export const PostHero: React.FC<{
   post: Post

test/live-preview/prod/app/live-preview/_components/Button/index.tsx

@@ -7,7 +7,7 @@ import React from 'react'
 
 import classes from './index.module.scss'
 
-const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
+const Link = 'default' in LinkWithDefault ? LinkWithDefault.default : LinkWithDefault
 
 export type Props = {
   appearance?: 'default' | 'none' | 'primary' | 'secondary'

test/live-preview/prod/app/live-preview/_components/Card/index.tsx

@@ -6,7 +6,7 @@ import type { Post } from '../../../../../payload-types.js'
 import { Media } from '../Media/index.js'
 import classes from './index.module.scss'
 
-const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
+const Link = 'default' in LinkWithDefault ? LinkWithDefault.default : LinkWithDefault
 
 export const Card: React.FC<{
   alignItems?: 'center'

test/live-preview/prod/app/live-preview/_components/Footer/index.tsx

@@ -6,7 +6,7 @@ import { Gutter } from '../Gutter/index.js'
 import { CMSLink } from '../Link/index.js'
 import classes from './index.module.scss'
 
-const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
+const Link = 'default' in LinkWithDefault ? LinkWithDefault.default : LinkWithDefault
 
 export async function Footer() {
   const footer = await getFooter()

test/live-preview/prod/app/live-preview/_components/Header/index.tsx

@@ -6,7 +6,7 @@ import { Gutter } from '../Gutter/index.js'
 import classes from './index.module.scss'
 import { HeaderNav } from './Nav/index.js'
 
-const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
+const Link = 'default' in LinkWithDefault ? LinkWithDefault.default : LinkWithDefault
 
 export async function Header() {
   const header = await getHeader()

test/live-preview/prod/app/live-preview/_components/Link/index.tsx

@@ -6,7 +6,7 @@ import type { Props as ButtonProps } from '../Button/index.js'
 
 import { Button } from '../Button/index.js'
 
-const NextLink = (NextLinkImport.default || NextLinkImport) as typeof NextLinkImport.default
+const NextLink = 'default' in NextLinkImport ? NextLinkImport.default : NextLinkImport
 
 type CMSLinkType = {
   appearance?: ButtonProps['appearance']

test/live-preview/prod/app/live-preview/_components/Media/Image/index.tsx

@@ -13,8 +13,8 @@ import classes from './index.module.scss'
 
 const { breakpoints } = cssVariables
 
-const NextImage = (NextImageWithDefault.default ||
+const NextImage =
-  NextImageWithDefault) as typeof NextImageWithDefault.default
+  'default' in NextImageWithDefault ? NextImageWithDefault.default : NextImageWithDefault
 
 export const Image: React.FC<MediaProps> = (props) => {
   const {

test/live-preview/prod/app/live-preview/_heros/PostHero/index.tsx

@@ -10,7 +10,7 @@ import RichText from '../../_components/RichText/index.js'
 import { formatDateTime } from '../../_utilities/formatDateTime.js'
 import classes from './index.module.scss'
 
-const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
+const Link = 'default' in LinkWithDefault ? LinkWithDefault.default : LinkWithDefault
 
 export const PostHero: React.FC<{
   post: Post