Error when evaluating SSR module even when SSR is disabled - SvelteKit

Introduction

During the development of applications using SvelteKit, issues with server-side rendering (SSR) may arise, even when it is disabled. This article will explore a problem where an error appears in the terminal despite SSR being disabled, while the application functionality remains operational.

The Problem and Its Causes

A user encountered an error ReferenceError: localStorage is not defined when attempting to disable SSR for a specific route in a SvelteKit application. Even after setting the ssr: false parameter both in svelte.config.js and within the route module script, the error still appears in the terminal upon page reload.

Checked Methods for Disabling SSR

1. Disabling SSR in svelte.config.js

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

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: preprocess(),
	kit: {
		ssr: false,
		adapter: adapter({ fallback: '200.html' }),
		prerender: {
			enabled: false,
		},
	}
};

export default config;

2. Disabling SSR in Route Module Script

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

Possible Causes of the Error

1. Incorrect Module Context Usage: Using context="module" in the `` tag can lead to unintended server-side rendering.
2. Code Errors: Mismatches between client and server versions of code can cause such errors.
3. Libraries Dependent on SSR: Some libraries may automatically run only on the server, leading to errors when SSR is disabled.

Resolving the Issue

Checking Module Context

Ensure that the module context (context="module") is used correctly:

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

This context indicates that this script is intended to run only on the client side.

Checking Library Usage

Make sure that the libraries used in your code do not depend on SSR. For example, if you use localStorage, ensure that this code works correctly both on the client and server sides.

Conditional Code Execution

You can use conditional code execution to prevent errors:

<script lang="ts">
	if (!ssr) {
		const yrtc = new Yrtc({
			roomId: 'tet-riieiiasds-di'
		});
		console.log({yrtc});
	}
</script>

Updating Dependencies

If the issue is related to a dependency, make sure you are using the latest version of that dependency.

Conclusion

The absence of SSR and the appearance of errors in the terminal can be a challenging task for developers. However, by correctly setting the module context, checking library usage, and implementing conditional code execution, this problem can be successfully resolved.

SEO Title

Error when evaluating SSR module even when SSR is disabled - SvelteKit

SEO Description

Explore SSR errors in SvelteKit even when SSR is disabled, and find solutions to resolve them.

SEO Keywords

SvelteKit, SSR, disabling SSR, terminal errors, localStorage

Tags

SvelteKit, SSR, disabling SSR, terminal errors, localStorage