Using a React library custom component - ES Module not supported
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 supportedHowever, 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?
Is the package you're importing ESM only?
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?
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".
Thanks for the tip. I'll look into it! 😁
@sam any looks with getting your ESM package to output in CJS?
No I haven't had chance to look at it yet, sorry!
@sam can we check out your tsconfig?
oops this was answered
Continue the discussion in Discord
Get help straight from the Payload team with an Enterprise License.Learn More