svelte kit svelte-apexcharts windowはdefine対応ではありません

2932 ワード

svelteキットは、クライアントとともにサーバ側レンダリングをサポートします.
したがって、サーバ側で使用されていない変数では、構築時にエラーが発生し、構築できません.
代表的な変数はwindowです.
宜景宇サーバーは使用禁止措置を取らなければならない.
svelteツールパッケージの場合、ブラウザ(クライアント)が使用可能かどうかを通知する変数が提供されます.
ただし、通常の変数や関数の実行条件をブラウザに調整するのは簡単です.
あまり使わないimportにはいくつかの欠点があるかもしれません.
だから例文を添付しました.

<script lang="ts"  >
import { browser } from '$app/env';
let chart:any   

onMount(
    async ()=>{
		if(browser){

			const charts = await import('svelte-apexcharts');
   			chart = charts.chart

		}
	}
)

let options:any
options = {
//차트 옵션 들...
}
</script>

 <div use:chart={options} />