Cannot read properties of undefined (reading '@payloadcms/richtext-lexical/client#RichTextField')

[zeitchef]

Link to reproduction

No response

Environment Info

Binaries:
  Node: 22.5.1
  npm: 10.8.2
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  payload: 3.0.0-beta.107
  next: 15.0.0-canary.158
  @payloadcms/db-postgres: 3.0.0-beta.107
  @payloadcms/email-nodemailer: 3.0.0-beta.107
  @payloadcms/graphql: 3.0.0-beta.107
  @payloadcms/next/utilities: 3.0.0-beta.107
  @payloadcms/plugin-cloud: 3.0.0-beta.107
  @payloadcms/plugin-nested-docs: 3.0.0-beta.107
  @payloadcms/richtext-lexical: 3.0.0-beta.107
  @payloadcms/translations: 3.0.0-beta.107
  @payloadcms/ui/shared: 3.0.0-beta.107
  react: 19.0.0-rc-f2df5694-20240916
  react-dom: 19.0.0-rc-f2df5694-20240916
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.1.0: Mon Oct  9 21:32:11 PDT 2023; root:xnu-10002.41.9~7/RELEASE_ARM64_T6030
  Available memory (MB): 18432
  Available CPU cores: 11

Describe the Bug

Similar issue to #7843 and possibly related to #8303.

I've followed the migration steps outlined here, but still hit this error when adding a richText field anywhere in my config and cannot access the admin area.

Here is the generated importMap.js

import { RichTextCell as RichTextCell_0 } from '@payloadcms/richtext-lexical/client'
import { RichTextField as RichTextField_1 } from '@payloadcms/richtext-lexical/client'
import { getGenerateComponentMap as getGenerateComponentMap_2 } from '@payloadcms/richtext-lexical/generateComponentMap'
import { FixedToolbarFeatureClient as FixedToolbarFeatureClient_3 } from '@payloadcms/richtext-lexical/client'
import { InlineToolbarFeatureClient as InlineToolbarFeatureClient_4 } from '@payloadcms/richtext-lexical/client'
import { HorizontalRuleFeatureClient as HorizontalRuleFeatureClient_5 } from '@payloadcms/richtext-lexical/client'
import { OrderedListFeatureClient as OrderedListFeatureClient_6 } from '@payloadcms/richtext-lexical/client'
import { UnorderedListFeatureClient as UnorderedListFeatureClient_7 } from '@payloadcms/richtext-lexical/client'
import { ParagraphFeatureClient as ParagraphFeatureClient_8 } from '@payloadcms/richtext-lexical/client'
import { SuperscriptFeatureClient as SuperscriptFeatureClient_9 } from '@payloadcms/richtext-lexical/client'
import { SubscriptFeatureClient as SubscriptFeatureClient_10 } from '@payloadcms/richtext-lexical/client'
import { StrikethroughFeatureClient as StrikethroughFeatureClient_11 } from '@payloadcms/richtext-lexical/client'
import { UnderlineFeatureClient as UnderlineFeatureClient_12 } from '@payloadcms/richtext-lexical/client'
import { BoldFeatureClient as BoldFeatureClient_13 } from '@payloadcms/richtext-lexical/client'
import { ItalicFeatureClient as ItalicFeatureClient_14 } from '@payloadcms/richtext-lexical/client'
import { default as default_15 } from '@/components/Decks/RowLabel'

export const importMap = {
  "@payloadcms/richtext-lexical/client#RichTextCell": RichTextCell_0,
  "@payloadcms/richtext-lexical/client#RichTextField": RichTextField_1,
  "@payloadcms/richtext-lexical/generateComponentMap#getGenerateComponentMap": getGenerateComponentMap_2,
  "@payloadcms/richtext-lexical/client#FixedToolbarFeatureClient": FixedToolbarFeatureClient_3,
  "@payloadcms/richtext-lexical/client#InlineToolbarFeatureClient": InlineToolbarFeatureClient_4,
  "@payloadcms/richtext-lexical/client#HorizontalRuleFeatureClient": HorizontalRuleFeatureClient_5,
  "@payloadcms/richtext-lexical/client#OrderedListFeatureClient": OrderedListFeatureClient_6,
  "@payloadcms/richtext-lexical/client#UnorderedListFeatureClient": UnorderedListFeatureClient_7,
  "@payloadcms/richtext-lexical/client#ParagraphFeatureClient": ParagraphFeatureClient_8,
  "@payloadcms/richtext-lexical/client#SuperscriptFeatureClient": SuperscriptFeatureClient_9,
  "@payloadcms/richtext-lexical/client#SubscriptFeatureClient": SubscriptFeatureClient_10,
  "@payloadcms/richtext-lexical/client#StrikethroughFeatureClient": StrikethroughFeatureClient_11,
  "@payloadcms/richtext-lexical/client#UnderlineFeatureClient": UnderlineFeatureClient_12,
  "@payloadcms/richtext-lexical/client#BoldFeatureClient": BoldFeatureClient_13,
  "@payloadcms/richtext-lexical/client#ItalicFeatureClient": ItalicFeatureClient_14,
  "@/components/Decks/RowLabel#default": default_15
}

Reproduction Steps (Edited)

1. Update package.json to beta.108
2. Add richText field with lexicalEditor configuration anywhere in Payload configs:

// test collection
import {
  BoldFeature,
  FixedToolbarFeature,
  HorizontalRuleFeature,
  HTMLConverterFeature,
  InlineToolbarFeature,
  ItalicFeature,
  lexicalEditor,
  OrderedListFeature,
  ParagraphFeature,
  StrikethroughFeature,
  SubscriptFeature,
  SuperscriptFeature,
  UnderlineFeature,
  UnorderedListFeature,
} from '@payloadcms/richtext-lexical'
import type { CollectionConfig } from 'payload'

export const Tracks: CollectionConfig = {
  slug: 'tracks',
  admin: {
    useAsTitle: 'title',
    group: 'Content',
  },
  access: {
    read: () => true,
  },
  fields: [
    {
      name: 'title',
      type: 'text',
    },
    {
      name: 'description',
      type: 'richText',
      editor: lexicalEditor({
        features: () => [
          BoldFeature(),
          ItalicFeature(),
          UnderlineFeature(),
          StrikethroughFeature(),
          SubscriptFeature(),
          SuperscriptFeature(),
          ParagraphFeature(),
          UnorderedListFeature(),
          OrderedListFeature(),
          HorizontalRuleFeature(),
          InlineToolbarFeature(),
          FixedToolbarFeature(),
          HTMLConverterFeature({}),
        ],
      }),
    },
  ],
}

3. Run pnpm run payload generate:importmap and start dev server

Adapters and Plugins

See output above.

[zeitchef]

This seems to be related to richText field types - including these in our blocks will create the error.

[zeitchef]

@AlessioGr Per your request on Discord, I've updated the simple steps to reproduce this error on my side (see initial comment). Here is the error message on the server:

[AlessioGr]

@zeitchef I have just tested this on 3.0.0-beta.109 and am not able to reproduce this following your reproduction steps. If you are still able to reproduce this in beta.109, please provide a link to a GitHub repo that is a minimal reproduction

[denolfe]

No response, closing as can't reproduce.

[github-actions[bot]]

This issue has been automatically locked. Please open a new issue if this issue persists with any additional detail.