SvelteKit+Vite导入Jodit编辑器遇SSR错误及动态导入问题求助

• SSR环境不兼容浏览器全局变量：Jodit富文本编辑器初始化时依赖self这类浏览器专属的全局对象，但SvelteKit默认会在服务器端渲染（SSR）阶段执行组件代码，服务器环境不存在self，直接静态导入就会触发"self is not defined"错误。
• 动态导入写法有误：你在onMount中尝试动态导入时，可能没正确匹配Jodit的导出结构（比如混淆了默认导出和具名导出），导致jodit is undefined。
• 热重载的特殊逻辑：热重载时SvelteKit会跳过部分SSR校验流程，直接在浏览器端执行代码，所以静态导入能临时正常渲染；但手动刷新或重启项目会重新走完整的SSR流程，错误就会复现。

方法一：onMount配合正确的动态导入 #

在组件中通过onMount确保代码仅在浏览器端执行，同时正确处理Jodit的导出：

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

let editorInstance;
let editorContainer;

onMount(async () => {
  // 注意：不同版本Jodit的导出可能不同，若默认导出无效，改用const { Jodit } = ...
  const Jodit = (await import('jodit')).default;
  editorInstance = new Jodit(editorContainer, {
    // 填入你的编辑器配置，比如宽度、工具栏选项等
    width: '100%',
    toolbarButtonSize: 'medium'
  });
});

// 组件销毁时清理编辑器，避免内存泄漏
onDestroy(() => {
  editorInstance?.destruct();
});
</script>

<div bind:this={editorContainer}></div>

方法二：用browser变量隔离客户端代码 #

借助SvelteKit提供的browser环境变量，让导入和渲染逻辑仅在浏览器端执行：

<script>
import { onMount, onDestroy } from 'svelte';
import { browser } from '$app/environment';

let editorInstance;
let editorContainer;

if (browser) {
  import('jodit').then((module) => {
    const Jodit = module.default;
    onMount(() => {
      editorInstance = new Jodit(editorContainer, { /* 你的配置 */ });
    });
  });
}

onDestroy(() => {
  editorInstance?.destruct();
});
</script>

{#if browser}
<div bind:this={editorContainer}></div>
{/if}

方法三：配置Vite标记Jodit为客户端专属模块 #

在项目根目录的vite.config.js中添加配置，让Vite明确Jodit仅在浏览器端加载：

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [sveltekit()],
  ssr: {
    // 排除Jodit参与SSR打包
    external: ['jodit']
  }
});

配置后再配合onMount动态导入，就能彻底避免SSR阶段的模块评估错误。

内容的提问来源于stack exchange，提问作者CodingCookie