Admin component does not work after upgrade from beta.67 to beta.108

jomapps commented 4 days ago

Link to reproduction

No response

Environment Info

Binaries:
  Node: 21.6.2
  npm: N/A
  Yarn: N/A
  pnpm: 9.11.0
Relevant Packages:
  payload: 3.0.0-beta.108
  next: 15.0.0-canary.160
  @payloadcms/db-mongodb: 3.0.0-beta.108
  @payloadcms/db-postgres: 3.0.0-beta.108
  @payloadcms/email-nodemailer: 3.0.0-beta.108
  @payloadcms/graphql: 3.0.0-beta.108
  @payloadcms/next/utilities: 3.0.0-beta.108
  @payloadcms/plugin-cloud-storage: 3.0.0-beta.108
  @payloadcms/plugin-search: 3.0.0-beta.108
  @payloadcms/richtext-lexical: 3.0.0-beta.108
  @payloadcms/richtext-slate: 3.0.0-beta.108
  @payloadcms/storage-s3: 3.0.0-beta.108
  @payloadcms/translations: 3.0.0-beta.108
  @payloadcms/ui/shared: 3.0.0-beta.108
  react: 19.0.0-rc-5dcb0097-20240918
  react-dom: 19.0.0-rc-5dcb0097-20240918
Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 65263
  Available CPU cores: 16

Describe the Bug

when I do localhost:3000/admin

✓ Compiled /admin/[[...segments]] in 10.1s (5813 modules) ⨯ Internal error: Error: Cannot access default.path on the server. You cannot dot into a client module from a server component. You can only pass the imported name through. at Object.get (C:\Projects\payload-3.0-demo\node_modules.pnpm\next@15.0.0-canary.160_babel-plugin-react-compiler@0.0.0-experimental-48eb8f4-20240822_react-_h5xpl647asxd57i2pwzfqhepry\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:114:73177) at parsePayloadComponent (./node_modules/.pnpm/payload@3.0.0-beta.108_graphql@16.9.0_monaco-editor@0.38.0_react-dom@19.0.0-rc-5dcb0097-20240_qotjvbfsl2c632rzjl4krqrh4a/node_modules/payload/dist/bin/generateImportMap/parsePayloadComponent.js:9:107) at getComponent (./node_modules/.pnpm/@payloadcms+ui@3.0.0-beta.108_monaco-editor@0.38.0_next@15.0.0-canary.160_babel-plugin-react-_4eoe4mrp7rygkp4yr3jmboandq/node_modules/@payloadcms/ui/dist/providers/Config/createClientConfig/getComponent.js:27:76) at createSingleMappedComponent (./node_modules/.pnpm/@payloadcms+ui@3.0.0-beta.108_monaco-editor@0.38.0_next@15.0.0-canary.160_babel-plugin-react-_4eoe4mrp7rygkp4yr3jmboandq/node_modules/@payloadcms/ui/dist/providers/Config/createClientConfig/getCreateMappedComponent.js:55:71) at createMappedComponent (./node_modules/.pnpm/@payloadcms+ui@3.0.0-beta.108_monaco-editor@0.38.0_next@15.0.0-canary.160_babel-plugin-react-_4eoe4mrp7rygkp4yr3jmboandq/node_modules/@payloadcms/ui/dist/providers/Config/createClientConfig/getCreateMappedComponent.js:104:14) at createClientField (./node_modules/.pnpm/@payloadcms+ui@3.0.0-beta.108_monaco-editor@0.38.0_next@15.0.0-canary.160_babel-plugin-react-_4eoe4mrp7rygkp4yr3jmboandq/node_modules/@payloadcms/ui/dist/providers/Config/createClientConfig/fields.js:278:42) at createClientFields (./node_modules/.pnpm/@payloadcms+ui@3.0.0-beta.108_monaco-editor@0.38.0_next@15.0.0-canary.160_babel-plugin-react-_4eoe4mrp7rygkp4yr3jmboandq/node_modules/@payloadcms/ui/dist/providers/Config/createClientConfig/fields.js:307:22) at createClientCollectionConfig (./node_modules/.pnpm/@payloadcms+ui@3.0.0-beta.108_monaco-editor@0.38.0_next@15.0.0-canary.160_babel-plugin-react-_4eoe4mrp7rygkp4yr3jmboandq/node_modules/@payloadcms/ui/dist/providers/Config/createClientConfig/collections.js:23:91) at createClientCollectionConfigs (./node_modules/.pnpm/@payloadcms+ui@3.0.0-beta.108_monaco-editor@0.38.0_next@15.0.0-canary.160_babel-plugin-react-_4eoe4mrp7rygkp4yr3jmboandq/node_modules/@payloadcms/ui/dist/providers/Config/createClientConfig/collections.js:197:28) at createClientConfig (./node_modules/.pnpm/@payloadcms+ui@3.0.0-beta.108_monaco-editor@0.38.0_next@15.0.0-canary.160_babel-plugin-react-_4eoe4mrp7rygkp4yr3jmboandq/node_modules/@payloadcms/ui/dist/providers/Config/createClientConfig/index.js:92:108) at RootLayout (./node_modules/.pnpm/@payloadcms+next@3.0.0-beta.108_graphql@16.9.0_monaco-editor@0.38.0_next@15.0.0-canary.160_ba_cqzhh2zxpwa354mueqkhu3ps7m/node_modules/@payloadcms/next/dist/layouts/Root/index.js:116:140) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) digest: "2607949399"

Reproduction Steps

This is a field component i was using fine in a collection till beta.67. After the upgrade to beta.108 it does not work with the error above. Has something changed? I was not able to find anything in the breaking changes.

If I remove this, code works fine.

in my collection I have: fields: [ TitleInputPlaceField, ... My component is: ` 'use client' import * as React from 'react' import { useField, useLocale, useDocumentInfo } from '@payloadcms/ui' import getGoogleMatch from '@/travelm/utilities/getGoogleMatch'

const CustomTextPlaceMatchComponent: React.FC<{ path: string }> = ({ path }) => { const { value, setValue } = useField({ path }) const [lastValue, setLastValue] = React.useState('') const [options, setOptions] = React.useState<string[]>([]) const derivedLocale = useLocale() let locale = 'de' if (derivedLocale?.code) locale = derivedLocale.code

const docInfo = useDocumentInfo()

React.useEffect(() => { const fetchOptions = async (value: string, locale: string) => { const data = await getGoogleMatch(value, locale) setOptions( data.map((item: any) => ${item.placeId} :: ${item.name} :: ${item.formattedAddress}), ) } if (value !== lastValue && !docInfo?.initialData?.placeId) { fetchOptions(value, locale.toString()) setLastValue(value) } }, [value, lastValue, locale, docInfo])

return ( <>

Title

  <input
    type="text"
    name={path}
    value={value}
    onChange={(e: any) => setValue(e.target.value)}
  />
  <ul>
    {options.map((o: string, i: number) => (
      <li className="cursor-pointer" key={i} onClick={() => setValue(o)}>
        {o}
      </li>
    ))}
  </ul>
</>

) }

export default CustomTextPlaceMatchComponent

And I define the field as : import { Field } from 'payload' import CustomTextPlaceMatchComponent from '@/travelm/fields/TitleInputPlaceField/component'

const TitleInputPlaceField: Field = { name: 'title', type: 'text', label: { en: 'Title', de: 'Titel', }, localized: true, index: true, required: true, admin: { components: { Field: CustomTextPlaceMatchComponent, }, }, }

export default TitleInputPlaceField

`