TypeError: Unknown file extension ".css" for @payloadcms/richtext-lexical/dist/exports/react/components/RichText/index.css

[haydnjonesdesign]

Describe the Bug

Hey

I'm just looking at PayloadCMS for a project and run into an issue near instantly... When adding a RichText component to the frontend of a blank payload install results in the following error.

Browser error

Server Error

TypeError: Unknown file extension ".css" for /Users/xxx/Sites/payload/payload/node_modules/@payloadcms/richtext-lexical/dist/exports/react/components/RichText/index.css

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Object.getFileProtocolModuleFormat [as
file:///]%20(node:internal/modules/esm/get_format (160:9)

Terminal error

|  > [email protected] dev
|  > cross-env NODE_OPTIONS=--no-deprecation next dev
│
│     ▲ Next.js 15.1.5
│     - Local:        http://localhost:3000
│     - Network:      http://192.168.0.110:3000
│     - Environments: .env
│     - Experiments (use with caution):
│       · turbo
│
│   ✓ Starting...
│   ✓ Ready in 2s
│   ○ Compiling /test-richtext ...
│   ✓ Compiled /test-richtext in 602ms (332 modules)
│   ⨯ TypeError: Unknown file extension ".css" for /Users/xxx/Sites/payload/payload/node_modules/@payloadcms/richtext-lexical/dist/exports/reac
│  t/components/RichText/index.css
│      at Object.getFileProtocolModuleFormat [as (file:] (node:internal/modules/esm/get_format:160:9) {
│    code: 'ERR_UNKNOWN_FILE_EXTENSION',
│    page: '/test-richtext'
│  }
│   ✓ Compiled /_error in 123ms (334 modules)
│   GET /test-richtext 500 in 2349ms
│  Failed to get source map: [Error: Failed to read file contents of file:] (node:internal/modules/esm/get_format.] {
│    [cause]: [Error: ENOENT: no such file or directory, open 'file:] (node:internal/modules/esm/get_format'] {
│      errno: -2,
│      code: 'ENOENT',
│      syscall: 'open',
│      path: 'file:] (node:internal/modules/esm/get_format'
│    }
│  }

Link to the code that reproduces this issue

https://github.com/haydnjonesdesign/payloadcms

Reproduction Steps

npx create-payload-app@latest -t blank

Install lexical

npm install @payloadcms/richtext-lexical

Add lexical to post schema

import type { CollectionConfig } from 'payload'
import { lexicalEditor } from '@payloadcms/richtext-lexical'

export const Posts: CollectionConfig = {
  slug: 'posts',
  fields: [
    {
      name: 'title',
      type: 'text',
    },
    {
      name: 'slug',
      type: 'text',
    },
    {
      name: 'body',
      type: 'richText',
      editor: lexicalEditor({}),
    }
  ],
  versions: {
    drafts: true
  },
  admin: {
    preview: (doc, { locale }) => {
      if (doc?.slug) {
        return `http://localhost:3000/${doc.slug}?locale=${locale}`
      }

      return null
    },
  },
}

Create page and add RichText component

import { getPayload } from 'payload'
import config from '@payload-config'
import { RichText } from '@payloadcms/richtext-lexical/react'

const payload = await getPayload({ config })

export default function Page({page}) {
  return (<>
   <h1>{page.title}</h1>
   <RichText data={page.body} />
  </>)
}

export async function getStaticProps() {
const post = await payload.find({
  collection: 'posts',
  where: {
      id: {
        equals: 2
      }
  }
  })
  return {
    props: {
      page: post.docs[0]
    }
  }
}

Received warning that @payloadcms/richtext-lexical/react required version 3.18.0.

Removed and downgraded

rm -r node_modules && npm install @payloadcms/[email protected]

Create a new post in admin. Add a heading, set slug to /test-richtext and add some text to Lexical.

Load page in browser

http://localhost:3000/test-richtext

Read Payload requires matched versions so downgraded Payload to 3.18.0

Reloaded page, resulting in the same error.

Which area(s) are affected? (Select all that apply)

plugin: richtext-lexical

Environment Info

Payload: 3.18
Next: v15.1.5
Node: v20.11.1 & 21.7.3

[github-actions]

Please add a reproduction in order for us to be able to investigate.

Depending on the quality of reproduction steps, this issue may be closed if no reproduction is provided.

Why was this issue marked with the invalid-reproduction label?

To be able to investigate, we need access to a reproduction to identify what triggered the issue. We prefer a link to a public GitHub repository created with create-payload-app@beta -t blank or a forked/branched version of this repository with tests added (more info in the reproduction-guide).

To make sure the issue is resolved as quickly as possible, please make sure that the reproduction is as minimal as possible. This means that you should remove unnecessary code, files, and dependencies that do not contribute to the issue. Ensure your reproduction does not depend on secrets, 3rd party registries, private dependencies, or any other data that cannot be made public. Avoid a reproduction including a whole monorepo (unless relevant to the issue). The easier it is to reproduce the issue, the quicker we can help.

Please test your reproduction against the latest version of Payload to make sure your issue has not already been fixed.

I added a link, why was it still marked?

Ensure the link is pointing to a codebase that is accessible (e.g. not a private repository). "example.com", "n/a", "will add later", etc. are not acceptable links -- we need to see a public codebase. See the above section for accepted links.

Useful Resources

• Reproduction Guide
• Contributing to Payload

[whatisloves]

I'm converting Lexical ---> JSX, when I use the the RichText component from the plugin
import { RichText } from '@payloadcms/richtext-lexical/react' and then

const ContentCardComponent: React.FC<ContentCardBlockProps> = ({ content }) => {
  return (
    <div className="mt-12 bg-purple-50 p-6 rounded-lg border-l-4 border-purple-500">
      <RichText data={content} />
    </div>
  );
};

const ContentCardBlock: Block = {
    slug: "content-card",
    fields: [
        {
            name: "content",
            type: "richText",
            editor: lexicalEditor({
                features: ({ rootFeatures }) => rootFeatures
            }),
            required: true,
        },
    ],
    interfaceName: "ContentCardBlock",
}

export { ContentCardBlock, ContentCardComponent };

and try to generate types automatically I get the same error as @haydnjonesdesign: TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for /Users/whatisloves/latb-web/node_modules/@payloadcms/richtext-lexical/dist/exports/react/components/RichText/index.css

Interestingly enough, when I replicate my code in the CMS Website template of Payload, types are being generated fine. In my own project type generation breaks. There is definitely something about configuration of Lexical.

This is how the file RichText/index.css looks:

.payload-richtext .nestedListItem,
.payload-richtext .list-check {
  list-style-type: none;
}

Thank you!

[yerled]

I’m facing a similar issue. I used a website template for my project, which worked initially. After removing some code, I ran into a slightly different problem.

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for /xxxx/xxxxx/xxx/node_modules/.pnpm/[email protected][email protected]/node_modules/react-image-crop/dist/ReactCrop.css

[eduhdev12]

I'm also facing the same issue while generating import maps

[Deadly12]

same issue

[jimmysafe]

same issue here

[sdelpercio]

I had the same type error issue as @yerled. I found that I was wrongly importing and using my custom react component as a field object instead of the SelectField config object I had created of the same name.

For example,

import { multiColumnSelect } from '@/fields/MultiColumnSelect/config' // <--- Was importing component instead of config here
import type { Block } from 'payload'

export const ColumnFilterBlock: Block = {
  slug: 'columnFilterBlock',
  interfaceName: 'Column Filter Block',
  fields: [
    {
      type: 'row',
      fields: [
        {
          label: 'Data Source Columns',
          ...multiColumnSelect,
        },
      ],
    },
  ],
}

[thepeno]

Exactly the same problem as @yerled

[thepeno]

Okay just found out the reason for my issue based on @sdelpercio 's answer.

I was importing a custom component like this:

import { BottomLevelLabel } from './Labels/BottomLevelLabel';

...
admin: {
                components: {
                  RowLabel: BottomLevelLabel,
                },
              },
...

Instead of like this:

admin: {
                components: {
                  RowLabel: './Labels/BottomLevelLabel',
                },
              },