svelte kit svelte-apexcharts window is not define 대응

svelte kit 에서는 클라이언트와 함께 서버측 렌더링을 지원합니다.
그래서 서버측에서 사용하지 않는 변수의 경우 build 시 에러가 나고 빌드가 안됩니다.
대표적인 변수가 window 입니다.

이경우 서버에서는 사용하지 않도록 조치를 취해야하는데,

svelte kit 의 경우 browser 라는 브라우저(클라이언트)의 유부를 알려누는 변수를 제공합니다.

그런데, 일반 변수나 함수가 실행되는 조건을 browser 로 조절하는 것은 쉬운데,

잘사용하지 않는 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} />