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.
Page options need to be placed in +page.js
, not +page.svelte
.
Alternatively, you can keep ssr
by implementing one of these workarounds.