Doesn't work with SvelteKit 1.5.0

[dimdenGD]

I get error in the title when trying to use it like this in SvelteKit 1.5.0:

TypeError: Cannot read properties of undefined (reading 'default')
    at Module.createCarousel [as default] (/node_modules/svelte-carousel/src/components/Carousel/createCarousel.js:23:19)
    at Carousel.svelte:33:70
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1892:22)
    at eval (/src/routes/+page.svelte:52:99)
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1892:22)
    at Object.default (root.svelte:42:40)
    at eval (/src/routes/+layout.svelte:48:32)
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1892:22)
    at root.svelte:41:39
    at $$render (/node_modules/svelte/internal/index.mjs:1892:22)

using code:

<script>
    import Carousel from 'svelte-carousel';
</script>
<div>
    <Carousel>
        <div>test</div>
        <div>test</div>
    </Carousel>
</div>

Versions: "@sveltejs/adapter-auto": "^2.0.0", "@sveltejs/kit": "^1.5.0", "svelte": "^3.54.0", "svelte-carousel": "^1.0.23", "vite": "^4.0.0"

[MelleNi]

Same issue in Astro

[Jaydeep189]

Getting th exact same error

[TomixUG]

Same

[leonbeon]

I had a slightly different error but also caused by a new sveltekit version, so maybe it will help you too: I used vite-plugin-iso-import as per the svelte docs for client-side only packages (last snippet).

It looks like this:

<script>
    import Carousel from 'svelte-carousel?client';
    // ...
</script>

You can also remove the vite exceptions in your vite.config.js so it looks like this:

import { sveltekit } from '@sveltejs/kit/vite';
import { isoImport } from 'vite-plugin-iso-import'

const config = {
    plugins: [isoImport(), sveltekit()],
};

export default config;

Tested in sveltekit v1.13.0.

[frandevea]

same issue

[g-roll]

With the browser module you can run code client-side only.

<script>
    import { browser } from '$app/environment';
    import Carousel from 'svelte-carousel';

    export let testimonials;
</script>

{#if browser}
    <Carousel>
        {#each testimonials as testimonial}
            ...
        {/each}
    </Carousel>
{/if}

Works for me in SvelteKit v1.20.4

[niocncn]

same issue on svelte 4