Navigation buttons do not respond in SvelteKit

[austinwritescode]

SvelteKit is still in beta, and this could possibly be a SvelteKit issue and not a Swiper issue. I'll report it to them if that is the case.

• Swiper Version: 6.6.1
• Svelte Version: 3.0.0
• Platform/Target and Browser Versions: Windows 10, Chrome 90.0.4430.93

What You Did

https://codesandbox.io/s/quiet-cache-4crt9?file=/App.svelte

Then I took this App.svelte and used it as index.svelte in a SvelteKit skeleton. To reproduce:
npm init svelte@next (skeleton project -> no -> no -> no)
npm install
npm install swiper
npm run dev
copy code from codesandbox to src/routes/index.svelte

Expected Behavior

Navigation buttons should work as in codesandbox

Actual Behavior

Navigation buttons appear but do not respond or enter the disabled state. Seems to work otherwise.

[nolimits4web]

Can you try importing swiper core and navigation explicitly from file:

import SwiperCore, { Navigation } from "swiper/swiper.esm.js";

[austinwritescode]

import SwiperCore, { Navigation } from "swiper/swiper.esm.js";

Vanilla Svelte handles this fine. This is how SvelteKit behaves on npm run dev:

Unexpected token 'export'

C:\Users\Austin\projects\test\test2\node_modules\swiper\swiper.esm.js:13
export { default as Swiper, default } from './esm/components/core/core-class';
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (internal/modules/cjs/loader.js:979:16)
    at Module._compile (internal/modules/cjs/loader.js:1027:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at nodeRequire (C:\Users\Austin\projects\test\test2\node_modules\vite\dist\node\chunks\dep-e9a16784.js:68211:17)
    at ssrImport (C:\Users\Austin\projects\test\test2\node_modules\vite\dist\node\chunks\dep-e9a16784.js:68164:20)
    at eval (C:\Users\Austin\projects\test\test2\src\routes\index.svelte:13:31)

I did a little debugging and found this thread that seemed relevant: mhkeller/layercake#41, but I tried some of the solutions mentioned there (install as devDependency, and svelte.config.js config.kit.vite.optimizeDeps.include = ['swiper']) and neither of them had any effect.

I also tried running it as a production build (npm run build -> npm run preview) and got this error with import SwiperCore, { Navigation } from 'swiper':

TypeError: SwiperCore.use is not a function
    at file:///C:/Users/Austin/projects/test/test2/.svelte-kit/output/server/app.js:5054:14
    at Object.$$render (file:///C:/Users/Austin/projects/test/test2/node_modules/svelte/internal/index.mjs:1377:22)   
    at Object.default (file:///C:/Users/Austin/projects/test/test2/.svelte-kit/output/server/app.js:52:117)
    at file:///C:/Users/Austin/projects/test/test2/.svelte-kit/output/server/app.js:148:42
    at Object.$$render (file:///C:/Users/Austin/projects/test/test2/node_modules/svelte/internal/index.mjs:1377:22)   
    at file:///C:/Users/Austin/projects/test/test2/.svelte-kit/output/server/app.js:51:78
    at $$render (file:///C:/Users/Austin/projects/test/test2/node_modules/svelte/internal/index.mjs:1377:22)
    at Object.render (file:///C:/Users/Austin/projects/test/test2/node_modules/svelte/internal/index.mjs:1385:26)     
    at render_response (file:///C:/Users/Austin/projects/test/test2/node_modules/@sveltejs/kit/dist/ssr.js:377:28)    
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

And this error with import SwiperCore, { Navigation } from 'swiper/swiper.esm.js':

> Named export 'Navigation' not found. The requested module 'swiper/swiper.esm.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'swiper/swiper.esm.js';
const {Navigation} = pkg;

file:///C:/Users/Austin/projects/test/test2/.svelte-kit/output/server/app.js:4
import SwiperCore, {Navigation} from "swiper/swiper.esm.js";
                    ^^^^^^^^^^
SyntaxError: Named export 'Navigation' not found. The requested module 'swiper/swiper.esm.js' is a CommonJS module, which may not support all module.exports as named exports.   
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'swiper/swiper.esm.js';
const {Navigation} = pkg;

    at ModuleJob._instantiate (internal/modules/esm/module_job.js:104:21)
    at async ModuleJob.run (internal/modules/esm/module_job.js:149:5)
    at async Loader.import (internal/modules/esm/loader.js:166:24)
    at async start (file:///C:/Users/Austin/projects/test/test2/node_modules/@sveltejs/kit/dist/chunks/index6.js:277:14)
    at async file:///C:/Users/Austin/projects/test/test2/node_modules/@sveltejs/kit/dist/cli.js:649:4

[0line]

I found a way to solve it, I'm passing you the code that I implemented in svelte kit.

<script lang="ts">
import Swiper from 'swiper';
import 'swiper/swiper.scss';
import 'swiper/components/navigation/navigation.scss';
import 'swiper/components/pagination/pagination.scss';

import { onMount } from 'svelte';
import { browser } from '$app/env';

let SwiperCore,Navigation,Autoplay,Lazy,Pagination ; 
if (browser) {
	onMount(async () => {
		SwiperCore  = (await import('swiper')).default;
		Navigation = (await import('swiper')).Navigation;
		Pagination = (await import('swiper')).Pagination;
		Autoplay = (await import('swiper')).Autoplay;
		Lazy = (await import('swiper')).Lazy;
		SwiperCore.use([Navigation,Pagination,Autoplay,Lazy]);
		const swiper = new Swiper('.swiper-container', {
			speed: 400,
			spaceBetween: 0,
			autoplay: {
				delay: 4000,
			},
			slidesPerView: 1,
			preloadImages: false,
			// Enable lazy loading
			lazy: {
				loadPrevNext: true,
			},
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
			pagination: {
				el: '.swiper-pagination',
				type: 'bullets',
				clickable:true,
				dynamicBullets:true
			},
			effect: 'fade',
			fadeEffect: {
				crossFade: true
			},
		});
	});
}
</script>
#Swiper Full HTML Layout
<!-- Slider main container -->
<div class="swiper-container">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

[davidmgrana]

any news? still having this issue, the above solution looks ugly

[nolimits4web]

fixed in #4768