payload generate:types fails in 3.0

[shell tapir]

The command payload generate:types throws an error when project contains .css files.

What is the proper way to handle .css files in 3.0?

error:

> [email protected] generate:types
> cross-env NODE_OPTIONS=--no-deprecation payload generate:types
node:internal/process/promises:391
    triggerUncaughtException(err, true /* fromPromise */);
    ^
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for /home/.../src/packages/shared-components/styles/images.css
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:176:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:219:36)
    at defaultLoad (node:internal/modules/esm/load:133:22)
    at async nextLoad (node:internal/modules/esm/hooks:750:22)
    at async load (file:///home/.../node_modules/tsx/dist/esm/index.mjs?1730985270476:2:1762)
    at async nextLoad (node:internal/modules/esm/hooks:750:22)
    at async Hooks.load (node:internal/modules/esm/hooks:383:20)
    at async handleMessage (node:internal/modules/esm/worker:199:18) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}
Node.js v22.3.0

[tranquil sparrow]

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

• Generating TypeScript Interfaces - Disable declare statement
• Generating TypeScript Interfaces - Custom output file path
• Generating TypeScript Interfaces - Using your types
• Generating TypeScript Interfaces - Types generation script
• GraphQL Schema - Custom Field Schemas - Adding an NPM script

Community-Help:

• Next Payload boilerplate build

[summer coral]

In 3.0, the payload config is no longer allowed to import client-only files (like .css files) anymore. You need to remove all such imports.

See this for more information: https://github.com/payloadcms/payload/releases/tag/v3.0.0-beta.79

[viral mason]

Only just found this after going around in circles for hours. What's the best way to handle a plugin that has styles? Also, running payload generate:importmap seems to be crashing by trying to import the css from react'image-crop used by @payloadcms/ui but not sure if thats related.

[summer coral]

The plugin should never import styles on the server. The correct way to do this is for the plugin to specify a path to the client component, and then that client component would import the styles

Just like you would provide custom components in the Payload Config

[primal tinsel]

I'm still getting this error

Any clue why?

payload generate:importmap

node:internal/process/promises:394
    triggerUncaughtException(err, true /* fromPromise */);
    ^
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for /Users/x/Documents/dev/helloworld/node_modules/react-image-crop/dist/ReactCrop.css

[summer coral]

you're still importing client-only stuff in your payload config

I would remove stuff from your config until it doesnt happen anymore - that way you know what caused this

[primal tinsel]

I see

I have this client component import in my collectionconfig for a custom component. Is this wrong way of using it?

import { WhiteboardField } from '../components/WhiteboardField/WhiteboardField';

export const Projects: CollectionConfig = { 
{
      name: 'whiteboard',
      type: 'json',
      admin: {
        components: {
          Field: WhiteboardField as any,
        },
      },
    },

I also have import 'tldraw/tldraw.css'; in that client component

[summer coral]

yep this is wrong. you can't import and pass it like that, instead you will have to provide the path to the client component as a string

[primal tinsel]

Yup, that solved it. Thanks!

[dreamy valley]

I have this issue, what does "you will have to provide the path to the client component as a string" mean?

[plain bison]

based on ex. ```
export const Projects: CollectionConfig = {
{
admin: {
components: {
Field: '/components/WhiteboardField/WhiteboardField',
},
},
},

https://payloadcms.com/docs/admin/components#component-paths

[frail mica]

I had this issue, but instead of custom css its because of @payloadcms/richtext-lexical/react

im using it like this:

// some more code, then returns

<RichText className="w-3/6 font-montserrat text-xl lg:text-2xl" data={props.overview} />```

the console throws this error:
```node_modules/.pnpm/@[email protected]_ppw4y4t6mpav3pnc5z5tyfy3eq/node_modules/@payloadcms/richtext-lexical/dist/exports/react/components/RichText/index.css:1
.payload-richtext .nestedListItem,
^

SyntaxError: Unexpected token '.'```

if i commented the RichText component it works fine, from the error thrown above, it looks like its another css import issue

[vital ingot]

Did you fix this? Im having the exact same issue

[pulsar sundial]

@frail mica @vital ingot, I'm having the same issue. Did you get to the bottom of it?

[vital ingot]

I wish

[frail mica]

Nope, my workaround is still commenting all the richtext then generate:types

sorry

[vital ingot]

Same…

[pulsar sundial]

Ha! Excellent, me too. Frustrating given that the CSS that causes the issue is literally just setting list style type to "none"

[vital ingot]

any updates? 😢

[pulsar sundial]

@vital ingot, not from me I’m afraid

[vital ingot]

im gonna try building after i upgrade to latest nextjs, react19, and payload

lets see

[patent rain]

I had this exact same issue. To fix the RichText issue, I created a RichTextClient component that I use instead.

'use client';
import dynamic from 'next/dynamic';
import { RichTextProps } from '../RichText';

const RichText = dynamic(() => import('../RichText'), { ssr: false });

export default function RichTextClient(props: RichTextProps) {
  return <RichText {...props} />;
}