Window is not defined

[309631]

While trying to set up chart from the README.md, I have received an error:
ReferenceError: window is not defined
I've tried all of ideas here: https://kit.svelte.dev/faq#integrations
I had same problem with d3, but I resolved it with adding onMount and typeof window, here is not working

`<script>
import { onMount } from 'svelte';
import { chart } from "svelte-apexcharts";

onMount(() => {
if (typeof window !== "undefined") {
let 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],
},
};
}
});
</script>`

`

`import adapter from '@sveltejs/adapter-static';
const dev = process.env.NODE_ENV === 'development';

It may be the problem with my config.svelte.js, so I am pasting it here as well. I am pretty new to Svelte and webdesign, so I may made an mistake there
`
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit:
{
adapter: adapter({
// default options are shown
pages: 'build',
assets: 'build',
fallback: null,
precompress: false
}),
trailingSlash: 'always',
paths: {
base: dev ? '' : '/app',
},
prerender: {
// This can be false if you're using a fallback (i.e. SPA mode)
default: true
},
vite: {
resolve: {
dedupe: ['@fullcalendar/common'],
browser: true,
},
optimizeDeps: {
include:['@fullcalendar/common']
}
}
},
paths: {
base: 'app/'
},
ssr:false,
};

export default config;`

Thank you in advance

[309631]

I resolved the problem by adding vite-plugin-iso-import plugin like in last answer:
https://stackoverflow.com/questions/69874742/sveltekit-console-error-window-is-not-defined-when-i-import-library

[Basir-PD]

I had same error in html2pdf and svelte-apexcharts and here is how to solve it in 3 simple steps:

• Install vite plugin: yarn add -D vite-plugin-iso-import
• Add plugin in svelte.config.js as

  import { isoImport } from 'vite-plugin-iso-import';
  
   kit: {
            vite: {
              plugins: [
                  isoImport(),
              ],
  

• then add ?client in import as below

  import { chart } from 'svelte-apexcharts?client';
  

[Eudritch]

The adapter static may not be installed in your dev dependency, so make sure to run npm install —save-dev '@sveltejs/adapter-static' then re-run your sveltekit app to see if it helped

[Creative-Difficulty]

The adapter static may not be installed in your dev dependency, so make sure to run npm install —save-dev '@sveltejs/adapter-static' then re-run your sveltekit app to see if it helped

Thats not how it works. This is the correct command (for nodejs 18): npm i -D @sveltejs/adapter-static

[strenkml]

I had same error in html2pdf and svelte-apexcharts and here is how to solve it in 3 simple steps:

* Install vite plugin: `yarn add -D vite-plugin-iso-import`

* Add plugin in svelte.config.js as
  ```
  import { isoImport } from 'vite-plugin-iso-import';
  
   kit: {
            vite: {
              plugins: [
                  isoImport(),
              ],
  ```

* then add `?client` in import as below
  ```
  import { chart } from 'svelte-apexcharts?client';
  ```

I am getting the following error:

error when starting dev server:
Could not load svelte.config.js: Unexpected option config.kit.vite

This is my svelte.config.js:

import adapter from '@sveltejs/adapter-node';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import { isoImport } from 'vite-plugin-iso-import';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),

  kit: {
    adapter: adapter(),
    vite: {
      plugins: [isoImport()]
    }
  }
};

export default config;

[AndreaDev237]

@strenkml
To solve the error do these steps:

-- Remove :

import { isoImport } from 'vite-plugin-iso-import';  

and

vite: { 
plugins: [isoImport()]
}

from svelte.config.js

-- Go to vite.config.ts and add
import { isoImport } from 'vite-plugin-iso-import';
and
isoImport()
to plugins

example of my vite.config.ts:

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

export default defineConfig({
	plugins: [sveltekit(), isoImport()],
	test: {
		include: ['src/**/*.{test,spec}.{js,ts}']
	}
});

after that in the page that use the apex chart include the following line:

import { chart } from 'svelte-apexcharts?client';

However this solution make you lose the intellisense of chart library, so using directly apexchart js library with OnMount() is a better solution
ERRATA CORRIGE:
The iso plugin has a custom typescript plugin to solve the intellisense problem,
Just add this to the tsconfig.json
{ "compilerOptions": { "plugins": [{ "name": "vite-plugin-iso-import" }] } }
Details about the fix HERE