(SvelteKit) ApexChart initialization causes "window is not defined" error on reload

[Arbee4ever]

When I use this library in my SvelteKit project, I get a "window is not defined" error when I reload the page. Any idea why? (Code: https://github.com/Arbee4ever/statcord_website/blob/development/src/components/leaderboard/Member.svelte#L62)
Error:

ReferenceError:` window is not defined
    at Object.<anonymous> (/home/arbee/WebstormProjects/statcord_website/node_modules/apexcharts/dist/apexcharts.common.js:6:387812)
    at Module._compile (node:internal/modules/cjs/loader:1155:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
    at Module.load (node:internal/modules/cjs/loader:1033:32)
    at Function.Module._load (node:internal/modules/cjs/loader:868:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:526:24)
    at async nodeImport (file:///home/arbee/WebstormProjects/statcord_website/node_modules/vite/dist/node/chunks/dep-68d1a114.js:56097:17)

[Arbee4ever]

I managed to find a solution, but it seems very hacky... Maybe someone can help me improve my code? (Code: https://github.com/Arbee4ever/statcord_website/blob/development/src/routes/leaderboards/%5BguildId%5D/%2Bpage.svelte#L37)

[gsidhu]

Commenting to say that the solution from this svelte-apexcharts issue worked for me!

First: npm install -D vite-plugin-iso-import

Here's my vite.config.ts –

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import { isoImport } from 'vite-plugin-iso-import';

export default defineConfig({
	plugins: [sveltekit(), isoImport()], // <--- add plugin here 
	assetsInclude: ['**/*.html']
});

The tsconfig.json –

{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
		"allowJs": true,
		"checkJs": true,
		"esModuleInterop": true,
		"forceConsistentCasingInFileNames": true,
		"resolveJsonModule": true,
		"skipLibCheck": true,
		"sourceMap": true,
		"strict": true,
		"moduleResolution": "bundler",
		"plugins": [{ "name": "vite-plugin-iso-import" }]  // <--- add plugin here 
	}
}

Here's a sample component –

<script>
  // @ts-ignore
  import ApexCharts from 'apexcharts?client';
	import { onMount } from 'svelte';
  var options = {
    chart: {
      type: 'bar'
    },
    series: [
      {
        name: 'sales',
        data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
      }
    ],
    xaxis: {
      categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
    }
  };

  function renderChart() {
    var chart = new ApexCharts(document.querySelector('#chart'), options);
    chart.render();
  }

  onMount(() => {
    renderChart();
  })
</script>

<div id="chart" />

The // @ts-ignore is needed because VSCode can't figure out a module called apexcharts?client. No issues otherwise.

For what it's worth, I use adapter-static:

import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
	// for more information about preprocessors
	preprocess: vitePreprocess(),

	kit: {
		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
		adapter: adapter({
			pages: 'build',
			assets: 'build',
			fallback: '404.html',
			precompress: false,
			strict: true
		}),
		alias: {
			"@lib": "./src/lib",
      "@/*": "./src/lib/*",
    }
	}
};

export default config;

Hope this helps someone!