Search code examples
svelteserver-side-renderingsveltekit

Sveltekit isn't respecting the ssr = false setting?


I'm just starting with sveltekit so this is probably something I'm doing wrong, but I have a very basic page based on the SplitPane example in Svelte (https://svelte.dev/repl/5ab84358dd8b46ad9474884f2359ff9b?version=3.50.1) that isn't working because it's rendering on the server and not finding a window object:

   window is not defined
   ReferenceError: window is not defined
       at HSplitPane.svelte:60:8

The code lives under routes in "+page.svelte":

<script>
    export const ssr = false;
    import { HSplitPane } from 'svelte-split-pane';
</script>


<div class="wrapper">
    <HSplitPane leftPaneSize="75%" rightPaneSize="25%" minLeftPaneSize="50px" minRightPaneSize="50px">
        <left slot="left">

            <h1>Welcome to SvelteKit</h1>
            <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>


        </left>
        <right slot="right">

        </right>
    </HSplitPane>
</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>

I was under the impression that the first bit:

export const ssr = false

would take care of the error, but that doesn't seem to be doing it. Any help greatly appreciated.


Solution

  • Page options need to be placed in +page.js, not +page.svelte.

    Alternatively, you can keep ssr by implementing one of these workarounds.