Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

(3.0.0-beta.102) Can't generate import map or types

default discord avatar
evil.dykelast year
6

Hello - I'm slowly updating my app and made it to [3.0.0-beta.79 release notes](

https://github.com/payloadcms/payload/releases/tag/v3.0.0-beta.79

).



Everything is well except I can no longer generate either types or the import map after completing every other step. I keep getting errors related to

.css

or

.scss

files, sometimes even in

node_modules

. Here's two examples of the outputs I get.



This one's complaining about css in node_modules


node:internal/process/promises:289
            triggerUncaughtException(err, true /* fromPromise */);
            ^
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for /Users/<HiddenUserName>/Documents/payload-project/node_modules/react-image-crop/dist/ReactCrop.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:143:22)
    at async nextLoad (node:internal/modules/esm/hooks:750:22)
    at async load (file:///Users/<HiddenUserName>/.nvm/versions/node/v22.1.0/lib/node_modules/payload/node_modules/tsx/dist/esm/index.mjs?1725997725643: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'
}


This one complains about a

.scss

file under a component of mine


node:internal/process/promises:289
            triggerUncaughtException(err, true /* fromPromise */);
            ^
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".scss" for /Users/<HiddenUserName>/Documents/payload-project/src/collections/Contacts/components/CompleteForm/ClientForm/index.scss
    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:143:22)
    at async nextLoad (node:internal/modules/esm/hooks:750:22)
    at async load (file:///Users/<HiddenUserName>/.nvm/versions/node/v22.1.0/lib/node_modules/payload/node_modules/tsx/dist/esm/index.mjs?1725998255682: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'
}
  • default discord avatar
    hristo6004last year

    Make sure all of your imports and components down the payload config are paths.

  • default discord avatar
    evil.dykelast year

    I will try this tomorrow! Thank you

  • discord user avatar
    denolfe
    last year

    This is likely the case. Still passing a component into the config.

  • default discord avatar
    evil.dykelast year

    Hmm all my imports are correct however I couldn't find guidance on what to do with nested components. For example, Contacts is in the payload config but Contacts (and only Contacts) makes use of its own EditViewComponent components



    I think this is the issue - but not sure how to solve it. I think the nested components are being referenced incorrectly here 🤔 (I especially hate casting anything

    as unknown

    )



    Can't find any docs on EditViewComponent hmm

  • default discord avatar
    hristo6004last year

    Simply write it as a path string, like

    Component: 'src\payload\CustomComponents\Component.tsx'

    No need to assert types as well 🙂

  • default discord avatar
    evil.dykelast year

    Woo!! That fixed it 😄 now back the docs.. if I'm lucky I can bring this app up to 102...

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.