Unknown file extension ".css" / ".scss" with Plugins

Dan6erbond commented 1 month ago

Link to reproduction

No response

Environment Info

Binaries:
  Node: 18.20.4
  npm: N/A
  Yarn: N/A
  pnpm: 8.3.1
Relevant Packages:
  payload: 3.0.0-beta.94
  next: 15.0.0-canary.132
  @payloadcms/db-mongodb: 3.0.0-beta.94
  @payloadcms/email-nodemailer: 3.0.0-beta.94
  @payloadcms/graphql: 3.0.0-beta.94
  @payloadcms/next/utilities: 3.0.0-beta.94
Relevant Packages:
  payload: 3.0.0-beta.94
  next: 15.0.0-canary.132
  @payloadcms/db-mongodb: 3.0.0-beta.94
  @payloadcms/email-nodemailer: 3.0.0-beta.94
  @payloadcms/graphql: 3.0.0-beta.94
  @payloadcms/next/utilities: 3.0.0-beta.94
  @payloadcms/db-mongodb: 3.0.0-beta.94
  @payloadcms/email-nodemailer: 3.0.0-beta.94
  @payloadcms/graphql: 3.0.0-beta.94
  @payloadcms/next/utilities: 3.0.0-beta.94
  @payloadcms/graphql: 3.0.0-beta.94
  @payloadcms/next/utilities: 3.0.0-beta.94
  @payloadcms/next/utilities: 3.0.0-beta.94
  @payloadcms/plugin-cloud: 3.0.0-beta.94
  @payloadcms/richtext-lexical: 3.0.0-beta.94
  @payloadcms/translations: 3.0.0-beta.94
  @payloadcms/ui/shared: 3.0.0-beta.94
  react: 19.0.0-rc-06d0b89e-20240801
  react-dom: 19.0.0-rc-06d0b89e-20240801
Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
  Available memory (MB): 32440
  Available CPU cores: 20

Describe the Bug

When adding the "@payload-enchants/better-localized-fields" or "@payload-enchants/better-use-as-title" plugins, I get the following error:

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for C:\Users\morav\Documents\Projects\localbites\node_modules\react-image-crop\dist\ReactCrop.css
    at new NodeError (node:internal/errors:405:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:136:11)
    at defaultGetFormat (node:internal/modules/esm/get_format:182:36)
    at defaultLoad (node:internal/modules/esm/load:101:20)
    at nextLoad (node:internal/modules/esm/hooks:864:28)
    at load (file:///C:/Users/morav/Documents/Projects/localbites/node_modules/tsx/dist/esm/index.mjs?1724832251621:2:1768)
    at nextLoad (node:internal/modules/esm/hooks:864:28)
    at Hooks.load (node:internal/modules/esm/hooks:447:26)
    at handleMessage (node:internal/modules/esm/worker:196:24)
    at Immediate.checkForMessages (node:internal/modules/esm/worker:138:28) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

While I would usually post an issue like this on the plugin's repo, it seems to be a Payload issue that comes from Payload's react-image-crop dependency as seen in my yarn.lock file:

"@payloadcms/ui@3.0.0-beta.94":
  version "3.0.0-beta.94"
  resolved "https://registry.yarnpkg.com/@payloadcms/ui/-/ui-3.0.0-beta.94.tgz#fc9f4fc26b5e8e77db4fbd1903ac216c275f3d25"
  integrity sha512-+Yxw3iEm5rXzZn/P52lC067JaE5XcIDVUN0hxA3NRNqh9i6d4DCO855dgQ6BXgd/dqrBQxWLB2wF3Su8TuA3Cg==
  dependencies:
    react-image-crop "10.1.8"

Reproduction Steps

Setup blank Payload project.
Install @payload-enchants/better-use-as-title.

Add the plugin to payload.config.ts:


import { betterUseAsTitle } from "@payload-enchants/better-use-as-title";

export default buildConfig({ ...config, plugins: [betterUseAsTitle({ collections: [] })] })


4. Run `payload generate:importmap`.

### Adapters and Plugins

@payload-enchants/better-use-as-title

r1tsuu commented 1 month ago

Hey @Dan6erbond

These plugins aren't up to date with the current version and it should be fixed in their repository. not payloadcms/payload

w41x commented 1 month ago

For me it had nothing to do with any plugins. I had the same error (Unknown file extension ".css" in react-image-crop). I duplicated my code and removed step-by-step anything that could be an issue until I had an almost clean PayloadCMS instance. The problem was, that I had an util function for creating collection groups and a react hook (using usePayloadAPI) in the same file, like this:

import {CollectionConfig} from 'payload'
import {usePayloadAPI} from '@payloadcms/ui'

export const withGroup = (group: NonNullable<CollectionConfig['admin']>['group']) => (collection: CollectionConfig): CollectionConfig => ({
    ...collection,
    admin: {
        ...collection.admin,
        group
    }
})

export const useCurrentUser = () => {

    const {data: {user}, isLoading, isError} = usePayloadAPI('/api/users/me')[0]

    return {
        user,
        isLoading,
        isError
    }

}

After separating those functions in different files everything worked fine (i.e.: I could generate the types again).

So I guess: Try to find any files that will be searched during type generation and separate any client-side code from server-side code!

christopherpickering commented 3 weeks ago

I have the same error as @w41x , I wonder if there is a faster way to find the problem file without step by step removal 😅

github-actions[bot] commented 3 weeks ago

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

payloadcms / payload