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