Simplify your stack and build anything. Or everything.
Schedule a Demo
USE CASES
Headless CMSEnterprise App BuilderHeadless E-CommerceDigital Asset Management
FEATURES
Multi-TenancyWhite LabelLocalizationAccess ControlAuth
CASE STUDIES

See what others are building with Payload.

Browse Case Studies
Build tomorrow’s web with a modern solution you truly own.
PAYLOAD IS FOR
DevelopersMarketing teamsEnterprise companiesAgencies & Consultancies
COMPARE PAYLOAD
Payload vs WordPressPayload vs ContentfulPayload vs SanityPayload vs StrapiPayload vs Directus
AGENCY TESTIMONIAL

"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."

Become a PartnerFind a Partner
Code-based nature means you can build on top of it to power anything.
Resources
DocumentationExamplesTemplatesGitHubReleasesBlogGuides & Tutorials
Community
RoadmapDiscordCommunity Help
Payload Cloud

Deploy your entire stack in one place with Payload Cloud.

LoginCloud Pricing
It’s time to take back your content infrastructure.
Schedule a Demo
Enterprise Features
SSOAI Auto-EmbeddingPublishing WorkflowsVisual EditorStatic A/B testingAI features
Customer Stories
MicrosoftASICSBlue OriginHello BelloTekton
Featured Customer Story

Microsoft chose Payload to tell the world about AI.

Read the case studyBrowse all
LoginGet Started
Community Help

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

Open

Continue the discussion in Discord

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.