<Carousel> is not a valid SSR component when used in SvelteKit
Lumca opened this issue · 6 comments
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';
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.
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";
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>
@mzaini30 thanks, it did solve the issue. But It would be better solved within the package.
I'd like to re-open this, since wouldn't this break on deployment?
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.