SvelteKit未遵循ssr=false设置，出现window未定义错误求助

问题原因 #

虽然你在+page.svelte中设置了export const ssr = false，但模块级别的组件导入（import { HSplitPane } from 'svelte-split-pane'）会在服务端构建阶段就执行，而svelte-split-pane组件内部直接访问了window对象，服务端环境没有window，因此触发错误。

解决方案 #

通过延迟组件导入到客户端环境来避免服务端执行组件代码，具体有两种常用方法：

方法1：使用onMount钩子动态导入 #

onMount是Svelte的生命周期钩子，仅在客户端执行，适合用来加载依赖浏览器环境的组件：

<script>
    export const ssr = false;
    import { onMount } from 'svelte';
    let HSplitPane;

    onMount(async () => {
        // 仅在客户端导入组件
        const module = await import('svelte-split-pane');
        HSplitPane = module.HSplitPane;
    });
</script>

<div class="wrapper">
    <!-- 确保组件加载完成后再渲染 -->
    {#if HSplitPane}
        <HSplitPane leftPaneSize="75%" rightPaneSize="25%" minLeftPaneSize="50px" minRightPaneSize="50px">
            <left slot="left">
                <h1>Welcome to SvelteKit</h1>
                <p>Visit kit.svelte.dev to read the documentation</p>
            </left>
            <right slot="right"></right>
        </HSplitPane>
    {/if}
</div>

<!-- 样式部分保持不变 -->
<style>
    main {
        text-align: center;
        margin: 0 auto;
    }
    div.wrapper {
        width: 95%;
        height: 400px;
        margin: auto;
    }
    left, right, top, down {
        width: 100%;
        height: 100%;
        display: block;
        text-align: center;
    }
    left, top {
        background-color:coral
    }
    right, down {
        background-color: cornflowerblue;
    }
</style>

方法2：检查浏览器环境后导入 #

直接通过判断window是否存在来决定是否导入组件：

<script>
    export const ssr = false;
    let HSplitPane;

    // 仅在客户端环境执行导入
    if (typeof window !== 'undefined') {
        HSplitPane = require('svelte-split-pane').HSplitPane;
    }
</script>

<!-- 模板和样式部分同方法1，需用{#if HSplitPane}包裹组件 -->

关键说明 #

• ssr = false是页面级别的配置，确保页面最终在客户端渲染，但模块级别的代码（如顶部的import）仍可能在服务端被解析执行。
• 依赖浏览器API（如window、document）的组件，必须延迟到客户端环境再加载，避免服务端执行时出错。

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