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

Введение

В процессе разработки приложений на SvelteKit иногда возникают проблемы с серверной стороной рендеринга (SSR), даже когда он отключен. В данной статье рассмотрим проблему, при которой ошибка появляется в терминале при отключенной SSR, несмотря на то что функциональность приложения остается работоспособной.

Проблема и ее причины

Пользователь столкнулся с ошибкой ReferenceError: localStorage is not defined при попытке отключить SSR для определенного маршрута в приложении SvelteKit. Даже после установки параметра ssr: false как в svelte.config.js, так и в модульном скрипте маршрута, ошибка все равно появляется в терминале при перезагрузке страницы.

Проверенные способы отключения SSR

1. Отключение SSR в 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. Отключение SSR в модульном скрипте маршрута

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

Возможные причины ошибки

1. Неправильное использование контекста модуля: Если context="module" используется в `` теге, это может привести к непреднамеренному серверному рендерингу.
2. Ошибки в коде: Несоответствие между клиентской и серверной версиями кода может вызвать такие ошибки.
3. Использование библиотек, зависящих от SSR: Некоторые библиотеки могут автоматически запускаться только на сервере, что приводит к ошибкам при отключенном SSR.

Решение проблемы

Проверка контекста модуля

Убедитесь, что контекст модуля (context="module") используется правильно:

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

Этот контекст указывает, что этот скрипт предназначен для выполнения только на клиентской стороне.

Проверка использования библиотек

Убедитесь, что библиотеки, используемые в вашем коде, не зависят от SSR. Например, если вы используете localStorage, убедитесь, что этот код работает корректно как на клиентской, так и на серверной стороне.

Использование условного выполнения кода

Вы можете использовать условное выполнение кода для предотвращения ошибок:

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

Обновление зависимости

Если проблема связана с зависимостью, убедитесь, что вы используете последнюю версию этой зависимости.

Заключение

Проблема отсутствия SSR и появление ошибок в терминале может быть сложной задачей для разработчика. Однако с помощью правильной настройки контекста модуля, проверки использования библиотек и условного выполнения кода можно успешно решить эту проблему.

SEO Title

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

SEO Description

Разберемся с ошибками SSR в SvelteKit, даже когда он отключен, и найдем решения для их устранения.

SEO Keywords

SvelteKit, SSR, отключение SSR, ошибки в терминале, localStorage

Tags

SvelteKit, SSR, отключение SSR, ошибки в терминале, localStorage