Like what we’re doing? Star us on GitHub!

Using a React library custom component - ES Module not supported

last month

I want to use a React library component (a local one in our monorepo, but I have the same issue using swiper/react) in a

type: 'ui'

field. I have also been able to reproduce this with the create payload app CLI

If I have the import in code and run serve, I get the following error:

Error [ERR_REQUIRE_ESM]: require() of ES Module not supported

However, if I remove the import and run serve -- once webpack kicks in, I can re-introduce the import and it works as expected.

I think it's related to my tsconfig, and possibly I need to exclude that import somehow when ts-node runs. Any ideas?

This seems to work using material UI (

) -- could it be related to how the library is bundled/defined?

  • denolfe
    Payload Team
    last month

    Is the package you're importing ESM only?

  • sam
    last month

    Yeah that was it in the end. The library stopped supporting CJS at a certain version. Downgrading it allowed me to use it in the payload admin panel.

    I was hoping to build out a live component preview within the admin panel, but I can't get approval on downgrading this and another library to older versions. Is the payload team thinking of supporting ESM only libs?

  • dsod
    last month

    Since your Payload configuration file is loaded from the Payload source code (which are CJS), the error occurs when you try to import a ESM module (CJS can't import ESM, while ESM can import both CJS (through dynamic imports) and ESM). Payload could provide both a ESM and CJS distribution which have been up for discussion.

    In the meantime though, you can use a bundler and transpile the ESM-only library into CJS for you. For example Vite in "library" mode and build target as "cjs".

  • sam
    last month

    Thanks for the tip. I'll look into it! 😁

  • damnstaychill
    4 weeks ago

    @sam any looks with getting your ESM package to output in CJS?

  • sam
    4 weeks ago

    No I haven't had chance to look at it yet, sorry!

  • thisisnotchris
    4 weeks ago

    @sam can we check out your tsconfig?

    oops this was answered

Open the post
Continue the discussion in Discord
Can't find what you're looking for?
Get help straight from the Payload team with an Enterprise License.Learn More