<Carousel> is not a valid SSR component when used in SvelteKit

[Lumca]

I am migrating my project from sapper to SvelteKit but I am getting:

Error: <Carousel> 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

the import is happening in <script> tag:

import Carousel from '@beyonk/svelte-carousel';
import { ChevronLeftIcon, ChevronRightIcon } from 'svelte-feather-icons';

[Lumca]

So I fixed it by moving the deps from dev to prod.
But the carousel doesnt work anyway.
It shows all the iamges and buttons doesnt work.

[Lumca]

Found out I get in console:
Uncaught SyntaxError: import not found: default on Carousel.svelte:32:7
which is
import Siema from "/node_modules/siema/dist/siema.min.js?v=1078998f";

[mzaini30]

Found out I get in console:
Uncaught SyntaxError: import not found: default on Carousel.svelte:32:7
which is
import Siema from "/node_modules/siema/dist/siema.min.js?v=1078998f";

Remove import Siema from 'siema' in Carousel.svelte. Then, write this in src/app.html:

<script src="https://rawcdn.githack.com/pawelgrzybek/siema/91bc183b0297b6d5d9d080c72491ab41ed1a0bf8/dist/siema.min.js"></script>

[Lumca]

@mzaini30 thanks, it did solve the issue. But It would be better solved within the package.

[raghav-kukreti]

I'd like to re-open this, since wouldn't this break on deployment?

[antony]

Its not a solution at all, so not exactly sure why it was closed.

However, I won't be fixing this so I'm looking for somebody to open a PR before we can close this.