Add SSR Support

[ieedan]

Summary

When using Apex Charts with SSR when importing the module Apex Charts tries to access window immediately because it uses top level calls in other imported modules. This causes apps using SSR to break when using the library because window is not accessible on the server. Components using the library have to be client rendered to work.

I am not super familiar with the library but I have just skimmed over to try and find any top level window calls.

Here are a few I found: /modules/helpers/InitCtxVariables.js

// global Apex object which user can use to override chart's defaults globally
if (typeof window.Apex === 'undefined') {
  window.Apex = {}
}

./svgjs/svg.js

• Includes an IIFE with multiple top level window calls

./libs/Treemap-squared

• Another IIFE with top level window calls

There are other issues open for SSR users already like:

• 4176

API Changes

• Maybe an init method wrapping the window calls so that users can determine when the code is loaded

Intended Use Case

Anyone using Sveltekit / Next.js / Remix or any other SSR framework

Current Work Around

• Using the CDN (Which isn't great if you are using type checking)
• SvelteKit users can add this code to their +page.server.ts file to client render components that use Apex Charts

  export const srr = false;

• Next.js users have to put "use client" at the top of their components

Issue recreation

https://github.com/ieedan/apex-charts-ssr

Steps:

pnpm install
pnpm run dev

Should see 500 error now

If you uncomment the CDN from app.html and comment import ApexCharts from "apexcharts" at the top of +page.svelte then it should render the chart with no issues.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[sapkra]

This is still a problem.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ruizmarc]

This is still a problem.

[Gerpea]

Do you think svgdom will help? @junedchhipa I mean, how hard would it be to add the use of this library?

[Creative-Difficulty]

still a problem

[tomprats]

This is also an issue with tests. I have a dependency that uses apexcharts, so when I import my dependency, Apex immediately tries to access window. I can only mock out the entire dependency, but then I'm mocking more than I'd like