Doesn't work with SvelteKit

[mcmxcdev]

Checks

• [X] Not a duplicate.
• [X] Not a question, feature request, or anything other than a bug report directly related to Svelte Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

0.1.18

Description

There are actually two issues that I encounter when using Splide with SvelteKit.

It is incompatible with SSR, so I need to wrap the component in an if check for the browser environment.

Additionally, the application breaks with the following error:

The code that I am using looks like this:

{#if browser}
<Splide>
  <SplideSlide>
    <img src="https://picsum.photos/200/300" alt="" />
  </SplideSlide>
  <SplideSlide>
    <img src="https://picsum.photos/200/300" alt="" />
  </SplideSlide>
</Splide>
{/if}

I also tried with other example code but it always breaks.

Reproduction Link

No response

Steps to Reproduce

1. Install Splide in a SvelteKit project
2. Copy the minimal example from https://splidejs.com/integration/svelte-splide/#usage
3. Expect page to break ...

Expected Behaviour

Splide works as expected with SvelteKit.

[NaotoshiFujita]

Why does your Splide.svelte component contain <p> tag? I did not use the tag at all.

Here is the component code:

{ #if hasSliderWrapper }
  <slot name="before-slider"/> // line 97 on your error
{ /if  }
// line 99 where your error occurs
{ #if hasSliderWrapper }
  <div class="splide__slider">
    <slot name="before-track"/>

    <div class="splide__track">
      <ul class="splide__list">
        <slot/>
      </ul>
    </div>

    <slot name="after-track"/>
  </div>
{ :else }
  <slot name="before-track"/>

  <div class="splide__track">
    <ul class="splide__list">
      <slot/>
    </ul>
  </div>

  <slot name="after-track"/>
{ /if  }

[mcmxcdev]

Yeah, I was wondering about that too when looking at the source code.

I think this was some kind of mess-up with Vite HMR and node_modules. I reinstalled the dependencies, and it seems to be fixed now, and I cannot reproduce the issue anymore.

Thank you!