Client Side Rendering on Admin Components

default discord avatar
12 months ago

Hello everyone, I need customize the default dashboard for my project. So I am using apexcharts as my chart library. I made a separate react component for Dashboard and imported in config under admin.components.view.Dashboard. The issue I am facing is, apexcharts is not compiling because window object is undefined. So, How do I achieve client side rendering for my custom components? Thank You for your time.

  • discord user avatar
    Payload Team
    12 months ago

    so this is super strange

    apexcharts must be trying to do something immediately when it is loaded

    most react libraries won't do anything with the window until they are rendered, and in the browser... but here, it seems like by just importing the library, it's attempting to do something with the window

    so i'd structure your custom Dashboard component in a way that does not import apexcharts until it actually gets rendered

    you could do this with React Suspense or similar

  • default discord avatar
    12 months ago

    Thanks. I will try. ❤️‍🔥

  • default discord avatar
    8 months ago

    Hey @Wanderer07 How did you end up fixing the issue

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!


Connect with the Payload Community on Discord



Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.