SvelteKit集成Tabulator组件失败：页面闪过后报500内部错误

AI 小北

2026-7-2

问题排查与修复步骤

1. 修复语法错误

+page.svelte的data数组中存在明显语法错误，最后一个对象的属性值后多了无效字符：

// 错误代码
let data = [
    {One: "One", Two: "Two", Three: "Three", Four: "Four", Five: "Five"a}
]

// 修正后
let data = [
    {One: "One", Two: "Two", Three: "Three", Four: "Four", Five: "Five"}
]

2. 修正组件导入与Props传递错误

+page.svelte里存在两处错误：

组件导入名称与文件名不匹配
Props传递时错误添加引号，导致数组被转为字符串传递

// 错误代码
import Tabulator from './Tabulator.svelte'
// ...
<TabulatorTable columns="{columns}" data="{data}" />

// 修正后
import TabulatorTable from './TabulatorTable.svelte'
// ...
<TabulatorTable {columns} {data} />

3. 适配SvelteKit服务端渲染环境

Tabulator依赖浏览器DOM，默认SSR环境下初始化会报错，需限制仅在客户端执行：
在TabulatorTable.svelte中添加浏览器环境判断：

<script>
  import pkg from 'tabulator-tables';
  const { Tabulator } = pkg;
  import { onMount } from 'svelte';
  import { browser } from '$app/environment';

  export let data, columns;

  let tableComponent;
  onMount(() => {
    if (!browser) return; // 仅在客户端初始化表格
    new Tabulator(tableComponent, {
      data: data,
      reactiveData: true,
      columns: columns,
    });
  });
</script>

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

也可以直接将组件文件名改为+TabulatorTable.svelte，SvelteKit会自动将其标记为仅客户端组件。