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.

Using a React library custom component - ES Module not supported

default discord avatar
_sadajo_2 years ago
7

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 (

https://mui.com/

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

  • discord user avatar
    denolfe
    2 years ago

    Is the package you're importing ESM only?

  • default discord avatar
    _sadajo_2 years ago

    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?

  • default discord avatar
    dsod2 years ago

    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".

  • default discord avatar
    _sadajo_2 years ago

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

  • default discord avatar
    damnstaychill2 years ago
    @173581681058512897

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

  • default discord avatar
    _sadajo_2 years ago

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

  • default discord avatar
    notchr2 years ago
    @173581681058512897

    can we check out your tsconfig?



    oops this was answered

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.