Carousel only works when using dev:ssr?

[timoanttila]

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

[mylastore]

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";

[timoanttila]

Builded version was ok.

[jackdnl]

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.

[Shogoki]

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?

[R3D2]

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

1. Clone this PR && Build it https://github.com/pawelgrzybek/siema/tree/0835cfdfa21d4a689070d63951b423a1db6f2325

2. 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

3. Modify your 'Carousel' component file import Siema from './siema.es'

No more errors, you can continue building wonders. - abraços