无法让简单的 Sveltekit、Tabulator 应用程序正常工作

Question

当我尝试向 Sveltekit 入门应用程序添加一个简单的制表器组件时，页面在屏幕上闪烁，但没有表格，然后我收到“500 内部错误”。我不知道如何调试这个。

我的 TabulatorTable.svelte：

<script>
   
  import pkg from 'tabulator-tables';
  const {Tabulator} = pkg;

  import {onMount} from 'svelte';

  export let data, columns;

  let tableComponent;
  onMount(() => {
    new Tabulator(tableComponent, {
      data: data, //link data to table
      reactiveData: true, //enable data reactivity
      columns: columns, //define table columns
    });
  });
</script>

<div bind:this="{tableComponent}"></div>
    
<svelte:head>
    <link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
</svelte:head>

我的+page.svelte：

<script>
    import Tabulator from './Tabulator.svelte'
    let columns = [
        {title: "One", field: "One"},
        {title: "Two", field: "Two"},
        {title: "Three", field: "Three"},
        {title: "Four", field: "Four"},
        {title: "Five", field: "Five"}
    ]
    let data = [
        {One: "One", Two: "Two", Three: "Three", Four: "Four", Five: "Five"a}
    ]
</script>

<svelte:head>
    <title>Home</title>
    <meta name="description" content="Svelte demo app" />
</svelte:head>

<h1>Hello</h1>
<br>
<TabulatorTable columns="{columns}" data="{data}" />

Answer 1

导入错误。这与导入命名导出不同，您试图破坏不存在的默认导出。

应该是：

import { Tabulator } from 'tabulator-tables';