svelte-carousel
svelte-carousel copied to clipboard
Carousel only works when using dev:ssr?
I was really happy to find this, but the joy turned to sadness when I noticed this only works for npm run dev:ssr
and not npm run dev
. Do I need to add a script or external file to the pages?
Using Routify with Tailwind node 14.17.0 npm 6.14.13
<script>
import Carousel from "@beyonk/svelte-carousel";
import Game from "./game/card.svelte";
export let data;
export let type = 1;
</script>
<div class="2xl:pl-0 2xl:pr-0 pl-6 pr-6 relative">
<Carousel perPage={{ 800: 3, 500: 2 }}>
{#each data as item}
<div class="slide-content p-3">
{#if type == 1}
<Game {item} />
{/if}
</div>
{/each}
</Carousel>
</div>
Maybe this is the problem?
Uncaught (in promise) TypeError: Siema is not a constructor
Similar issue for me with sveltekit and node adapter
"@sveltejs/adapter-node": "^1.0.0-next.24",
"@sveltejs/kit": "^1.0.0-next.112",
Uncaught (in promise) SyntaxError: import not found: default
Carousel.svelte:32:7
import Siema from "/node_modules/siema/dist/siema.min.js?v=1f999076";
Builded version was ok.
I have the same with Sveltekit, when running the dev server I get:
The requested module '/node_modules/siema/dist/siema.min.js?v=29358ee0' does not provide an export named 'default'
SyntaxError: The requested module '/node_modules/siema/dist/siema.min.js?v=29358ee0' does not provide an export named 'default'
It works in the build though.
We are experiencing the same here.. The page, where we included the carousel first get´s loaded in the DEV server. But after a while it show the error "export not found: default.
When i build the app and use the preview command it works fine.
Any clue on a solution for that?
It would be great for people to know about this bug in the readme, it really breaks the dev experience with sveltekit.
import * as Siema from 'siema'
This seems to get rid of the '500 import default error'.
EDIT
-
Clone this PR && Build it https://github.com/pawelgrzybek/siema/tree/0835cfdfa21d4a689070d63951b423a1db6f2325
-
Then copy the 'siema.es.js' in the dist folder in your component folder inside your sveltekit project
components or lib
Carousel
index.svelte => Carousel compoment siema.es.js
- Modify your 'Carousel' component file
import Siema from './siema.es'
No more errors, you can continue building wonders. - abraços