Error: <Tabs> is not a valid SSR component.

[KristerV]

I installed this lib and it worked great for the first 30min. Then I stopped my server and started again, now gives error. Have no idea what to do. Didn't change code.

Error: <Tabs> 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
    at validate_component (webpack:///./node_modules/svelte/internal/index.mjs?:1375:15)
    at eval (webpack:///./src/components/EmptyDash.svelte?:28:77)
    at Object.$$render (webpack:///./node_modules/svelte/internal/index.mjs?:1398:22)
    at eval (webpack:///./src/routes/%5Busername%5D/%5Bdash%5D.svelte?:81:165)
    at Object.$$render (webpack:///./node_modules/svelte/internal/index.mjs?:1398:22)
    at Object.default (webpack:///./src/node_modules/@sapper/internal/App.svelte?:37:190)
    at eval (webpack:///./src/node_modules/@sapper/internal/layout.svelte?:7:45)
    at Object.$$render (webpack:///./node_modules/svelte/internal/index.mjs?:1398:22)
    at eval (webpack:///./src/node_modules/@sapper/internal/App.svelte?:33:144)
    at $$render (webpack:///./node_modules/svelte/internal/index.mjs?:1398:22)

500

JSON.parse: unexpected character at line 1 column 1 of the JSON data

My component:

<script>
  import { Tabs, Tab, TabList, TabPanel } from "svelte-tabs";
  export let page;
</script>

<h1>Hello there {page.params.username}</h1>

<Tabs>
  <TabList>
    <Tab>JavaScript</Tab>
    <Tab>Curl</Tab>
    <Tab>Python</Tab>
    <Tab>Elixir</Tab>
  </TabList>

  <TabPanel>
[...truncated...]
  </TabPanel>

  <TabPanel>
[...truncated...]
  </TabPanel>

  <TabPanel>
[...truncated...]
  </TabPanel>

  <TabPanel>
[...truncated...]
  </TabPanel>
</Tabs>

[KristerV]

hang on, this might be because my app crashed and it's giving a wrong err.. stay tuned.

[KristerV]

uhh, it's acting very unpredictably. I did a git checkout, then retraced my work and everything worked. Then committed. Still working. Then I decide to try see if npm update was the culprit, but no. And all of a sudden, the same error. I don't know what I did again..

edit: omg this is the worst. I checkout previous commit, run and everything works (without tabs) checkout master and everything still works (with tabs).. uhh.. But now if I restart the server it gives that error again..

edit2: my solution was to clone the files into my app and import them that way.. Seems to work for now. My app is open-source, not that you want to waste time on that :D But I did add a reference link to this repo.

[kevinxh]

For those who might encounter the same issue as @KristerV 's, you need to install the package as dev dependency. This is because when sapper build the SSR page, it needs access to the source code, not the compiled version.

This apply to many other svelte/sapper component packages as well.

I remember this is mentioned in the Svelte/Sapper docs, but I didn't find it at the moment.