SvelteKit导入apexCharts库控制台报window is not defined如何解决

问题原因 #

你所有方案失效的核心原因：

• 静态ES模块导入是提前执行的，哪怕你把初始化逻辑写在onMount/条件块里，顶部import ApexCharts from 'apexcharts'的代码会在SSR阶段就运行，ApexCharts源码执行时直接访问window属性触发报错
• 普通静态import必须写在文件顶层，不能放在if逻辑块中
• 全局禁用SSR的配置在部分SvelteKit版本中可能不生效，或存在缓存问题
• 仅条件渲染组件但组件内部还是用了静态导入ApexCharts，依然会在SSR阶段触发导入逻辑报错

可行解决方法 #

方案1：动态导入（推荐，无需修改渲染配置） #

使用ES动态导入语法import()，把导入逻辑放在仅浏览器端执行的onMount钩子中，示例代码如下：

<script>
 import { onMount } from 'svelte'
 const myOptions = {/* 你的图表配置 */}
 onMount(async () => {
   // 动态导入仅在运行到该段代码时执行，onMount仅在浏览器端触发
   const ApexCharts = (await import('apexcharts')).default
   const chart = new ApexCharts(document.querySelector('[data-chart="profit"]'), myOptions)
   chart.render()
 })
</script>

<div data-chart="profit"></div>

方案2：单页禁用SSR #

如果你的页面本身就不需要SSR，可以直接在对应路由下新增+page.js（SvelteKit v1.0+版本），添加如下配置：

export const ssr = false

该配置会让当前页面完全走客户端渲染，此时你可以直接在页面顶部静态导入ApexCharts，不会触发SSR阶段的window报错。

注意事项 #

两种方案任选其一即可，不需要同时使用。如果是多页面需要用到ApexCharts，推荐用方案1的动态导入写法，更灵活，不会影响其他页面的SSR逻辑。

内容的提问来源于stack exchange，提问作者LukasGur