muonw / muonw-powertable

▦ PowerTable is a Svelte component that turns JSON data into an interactive HTML table. Inspired by DataTables. Powered by Svelte.
https://muonw.github.io/muonw-powertable/
Other
218 stars 13 forks source link

Not avalid SSR component #36

Closed toddbruner closed 10 months ago

toddbruner commented 10 months ago

Hi, I'm trying to follow your README to install PowerTable into a page in a small test SvelteKit app and I'm getting the following error:

Error: <PowerTable> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules. Otherwise you may need to fix a <PowerTable>.

my package.json:

{
      "name": "savant-ui",
      "version": "0.0.1",
      "private": true,
      "scripts": {
          "dev": "vite dev",
          "build": "vite build",
          "preview": "vite preview",
          "test": "npm run test:integration && npm run test:unit",
          "lint": "prettier --check . && eslint .",
          "format": "prettier --write .",
          "test:integration": "playwright test",
          "test:unit": "vitest"
      },
      "devDependencies": {
          "@muonw/powertable": "^2.3.5",
          "@playwright/test": "^1.28.1",
          "@sveltejs/adapter-auto": "^2.0.0",
          "@sveltejs/kit": "^1.27.4",
          "eslint": "^8.28.0",
          "eslint-config-prettier": "^9.0.0",
          "eslint-plugin-svelte": "^2.30.0",
          "prettier": "^3.0.0",
          "prettier-plugin-svelte": "^3.0.0",
          "svelte": "^4.2.7",
          "vite": "^4.4.2",
          "vitest": "^0.32.2"
      },
      "type": "module",
      "dependencies": {
          "@types/d3": "^7.4.3",
          "d3": "^7.8.5"
      }
  }

The page I'm trying to use the PowerTable in is src/routes/foo/+page.svelte

<script>
      import PowerTable from "@muonw/powertable";
      import SearchBar from "$lib/SearchBar.svelte";

      const data = [
          {"hostname": "foobar", last_scan: "never" },
          {"hostname": "boombaz", last_scan: "never" },
      ];
  </script>

  <h1>System</h1>
  <div class="searchBar">
      <SearchBar/>
  </div>
  <PowerTable {data} />

If it would help, I could create a small repo to demonstrate the issue.

Thank you for your help.

muonw-public commented 10 months ago

Please note that the README example uses destructing:

import { PowerTable } from '@muonw/powertable';