Splidejs/svelte-splide

Doesn't work with SvelteKit

mcmxcdev opened this issue · 2 comments

mcmxcdev commented

Checks

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:
Screenshot from 2022-02-07 10-01-19

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 commented

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 commented

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!

  • 👍1