Client Side Rendering on Admin Components

default discord avatar
Wanderer07
6 months ago
7

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
    jmikrut
    Payload Team
    6 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
    Wanderer07
    6 months ago

    Thanks. I will try. ❤️‍🔥

  • default discord avatar
    roac
    2 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!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

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