Error when evaluating SSR module even when SSR is disabled - svelte-kit

Question

I wanted one of my route in my app not to be server side rendered. The way to do this will be doing export const ssr = false in module script or setting ssr: false in svelte.config.js as mention in svelte docs

But even after disabling ssr in both the ways, I'm still getting errors in terminal like localStorage is not defined which should be not there with ssr disabled.

While app still works find. But whenever i reload the page in browser this error appears on the terminal

[vite] Error when evaluating SSR module /src/routes/index.svelte:
ReferenceError: localStorage is not defined

svelte.config.js

import preprocess from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess(),
    kit: {
        ssr: false,
        adapter: adapter({
            fallback: '200.html'
        }),
        prerender: {
            enabled: false
        },
    }
};

export default config;

index.svelte

<script context="module" lang="ts">
    export const ssr = false
</script>

<script lang="ts">
    import Yrtc from "./../helpers/Yrtc";
    import { onMount } from "svelte";

    onMount(() => {
        const yrtc = new Yrtc({
            roomId: 'tet-riieiiasds-di'
        })

        console.log({yrtc})
    })
</script>
test

Cosenza

This is currently a limitation, see github.com/sveltejs/kit/issues/1650 for more info. github.com/sveltejs/kit/pull/2529 might fix this if you are going SPA-only for the whole app and don't need any SSR capabilities. – Shel

Answer 1

At least nowadays (tested with SvelteKit 1.20.4), this works as advertised. Note that a few things in the question's example code were removed or are not necessary to solve the problem:

const config = {
    // ...
    kit: {
        ssr: false,
        prerender: {
            enabled: false
        },
        // ...
    }
};

These two options individually lead to the errors "Unexpected option config.kit.ssr" and "Unexpected option config.kit.prerender.enabled" respectively, and will abort the build.

<script context="module">
    export const ssr = false
</script>

Independently of whether it's in the module script, this leads to the following warning: "export const ssr will be ignored — move it to +page(.server).js/ts instead. See https://kit.svelte.dev/docs/page-options for more information."

The reason for requiring this is that reading the ssr property exported from some +page.svelte requires actually loading the component, including imports, at which point it is too late for preventing the issue.

If the export is moved to either of these files (+page(.server).js/ts), it will work. Steps to reproduce:

• create a new project (use demo app template): npm create svelte@latest no-ssr-test && cd no-ssr-test && npm i
• in src/routes/+page.svelte, insert console.log(window)
• run using npm run dev to verify you get ReferenceError: window is not defined
• in src/routes/+page.js (or similar), insert export const ssr = false
• run using npm run dev to verify the site works again

Plumb

Answer 2

Variables like localStorage, document and self are not defined on the server. Use those variables inside onMount function which is only run in the browser when the component has been rendered:

<script>
  import { onMount } from 'svelte';

  onMount(() => {
    document.createElement(...);
    
    // ...
  });
</script>

^{Source: https://mcmap.net/q/467078/-referenceerror-document-is-not-defined-in-svelte-3}

If you're importing an external module that depends on those variables, use the import() function to load the module at runtime:

<script>
    import { onMount } from 'svelte'

    onMount(async () => {
        const Plotly = await import('plotly.js-dist-min')

        // ...
    })
</script>

^{Source: https://mcmap.net/q/92805/-how-can-i-conditionally-import-an-es6-module}

Eyetooth