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

`

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], }, }; } }); `

`

`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