Swiper Svelte doesn't support SSR under Sapper JS

[igolkotek]

This is a (multiple allowed):

• [] bug

• enhancement

• feature-discussion (RFC)

• Swiper Version: 6.3.5.

• Platform/Target and Browser Versions: Ubuntu 20.04, Firefox 83.

What you did

Sapper bundle compilation in dev mode fails both whether Swiper is added according to Swiper site example or with Mount according to Sapper recommendations.

[btakita]

Would it be possible to include the source *.svelte components in the build? This would enable the *.svelte components to be built using the current project's svelte compiler, ensuring the correct version & configuration is used during the build.

[vltansky]

@igolkotek @btakita can you confirm that it's fixed ?

[silllli]

Same problem here.

When I import the *.svelte components directly, Rollup fails to import some helper files like ./init-swiper and ./utils, or am I missing something?

[zakkor]

I've managed to fix it in a fork just enough so we can keep using Swiper in our project, however I'm not sure what a proper fix would be because I'm not familiar with the build process (which seems fairly complex).

It seems like the main issue is that when you import something in a Svelte project, it expects to compile the component along with all of its dependencies, through each projects' build process.
In this repository however, none of the built JS files that the Svelte components are trying to import are actually included, so Svelte complains that it can't find the files and the build doesn't work.

Here are the changes I made in order to get it to work: zakkor@0984204

I fixed the import paths so they point to the correct files, and included some of the needed pre-built JS files in the build dir (esm version only)

[vltansky]

@zakkor could you take a look at the suggested change in #4061 PR? I think this should work well.

[silllli]

For anyone wondering: this works now, but you need to load the Swiper module dynamically in the onMount function. There is an example in the Sapper docs.

[brian-hay]

@silllli any chance you can provide a working code snippet? I managed to get the imports working using onMount, and the first slide displays with left/right carets overlaid but empty pagination tag and navigation isn't possible - it's just stuck on first slide, with no console errors.

[silllli]

Maybe you forgot to import and tell Swiper about the navigation and pagination modules?

I didn’t test it, but something like this should work:

<script>
  import { onMount } from 'svelte';
  import SwiperCore, { Navigation, Pagination } from 'swiper';

  // tell swiper to use navigation and pagination modules
  SwiperCore.use([Navigation, Pagination]);

  let Swiper;
  let SwiperSlide;

  onMount(async () => {
    // dynamically import swiper module
    const SwiperSvelteModule = await import('swiper/svelte');
    Swiper = SwiperSvelteModule.Swiper;
    SwiperSlide = SwiperSvelteModule.SwiperSlide;
  });
</script>

// NOTE: the swiper stylesheets need to be imported as well

<svelte:component
  this={Swiper}
  navigation={{
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }}
  pagination={{
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true,
  }}>

  <svelte:component this={SwiperSlide}>
    Slide content
  </svelte:component>

  <div class="swiper-pagination" slot="container-end"></div>

  <div class="swiper-button-prev" slot="container-end"></div>
  <div class="swiper-button-next" slot="container-end"></div>
</svelte:component>

You also need to import the needed Swiper stylesheets. I do it in the style tag via SASS, whereas the Swiper docs import them in the <script> tag.

I hope it helps!

[brian-hay]

Thanks for the the comprehensive response @silllli . I had most of that in place but I modified to match exactly and no change as yet. I'll keep trying.

[silllli]

I looked at it again since this bugged me. 🤓

Some adjustments were needed—I experienced a similar scenario that you describe (being stuck on the first slide) after running my code. I then added the slidesPerView param, and it worked! Maybe adding it will already do the trick for you.

Here is my actually working code:

<script>
  import { onMount } from 'svelte';
  import SwiperCore, { Navigation, Pagination } from 'swiper';

  // tell swiper to use navigation and pagination modules
  SwiperCore.use([Navigation, Pagination]);

  let Swiper;
  let SwiperSlide;

  onMount(async () => {
    // dynamically import swiper module
    const SwiperSvelteModule = await import('swiper/svelte');
    Swiper = SwiperSvelteModule.Swiper;
    SwiperSlide = SwiperSvelteModule.SwiperSlide;
  });
</script>

<style lang="scss">
  :global {
    @import 'swiper/swiper';
    @import 'swiper/components/navigation/navigation';
    @import 'swiper/components/pagination/pagination';

    .swiper-slide {
      height: 500px;
      background: red;
    }
  }
</style>

<svelte:component
  this={Swiper}
  navigation={true}
  pagination={{
    type: 'bullets',
    clickable: true,
  }}
  slidesPerView={1}
  spaceBetween={100}>

  <svelte:component this={SwiperSlide}>
    Slide content 1
  </svelte:component>

  <svelte:component this={SwiperSlide}>
    Slide content 2
  </svelte:component>

  <svelte:component this={SwiperSlide}>
    Slide content 3
  </svelte:component>
</svelte:component>

I also found this in the docs:

Note, Swiper Svelte component will create required elements for Navigation, Pagination and Scrollbar if you pass these params without specifying its elements (e.g. without navigation.nextEl, pagination.el, etc.)

So we actually don’t need to use the slots (and my first code was wrong—there can always only be one element assigned per slot).

[brian-hay]

Thanks @silllli . Still no joy for me. Not sure what's wrong with it.

I copied and pasted the carousel from https://github.com/beyonk-adventures/svelte-carousel/blob/master/src/Carousel.svelte into my own Carousel component and that worked.

[nolimits4web]

https://swiperjs.com/svelte#using-with-sapper

[brian-hay]

@nolimits4web thanks for this but still having trouble. I'm using SvelteKit (beta), the replacement for Sapper.

After updating swiper dependencies and imports as per new docs, the production build runs but the the carousel doesn't work (all slides are displayed at once).

The local dev build results in the following error:

[thebells1111]

@brian-hay

Did you try this yet?

https://swiperjs.com/svelte#using-with-sapper-and-svelte-kit

[brian-hay]

@thebells1111 yes that error I posted above is after following the instructions in that link.

[davidmgrana]

any news on this? having the same issue with sveltekit, navigation won't work

[RomanistHere]

There is a workaround for SvelteKit (should work for Sapper too)

Slider.svelte

<script>
    import { Swiper, SwiperSlide } from 'swiper/svelte';
    import SwiperCore, { Mousewheel, Pagination } from 'swiper';
    import 'swiper/css';
    import 'swiper/css/pagination';

    ...

    SwiperCore.use([Mousewheel, Pagination]);
</script>

...
    <Swiper
        direction='vertical'
        mousewheel={true}
        pagination={true}
        slidesPerView={1}
        on:slideChange={onSlideChange}
        on:swiper={(e) => console.log(e.detail[0])}
    >
        <SwiperSlide>
    </Swiper>
...

This is going work, we import Slider.svelte component this way:

<script>
    ...
    let Slider;
    onMount(async () => {
	    const module = await import('./components/Slider.svelte');
	    Slider = module.default;
    });
    ...
</script>

<svelte:component this={Slider}/>

...

So I basically suggest not to import all the Swiper instances within onMount, rather to import component, containing the Swiper Slider inside onMount - hope it's gonna help someone and keep your codebase cleaner :)

[xpluscal]

@RomanistHere excuse my ignorance, but how does this work for Sapper applications?