Swiper issue with Svelte + Snowpack

[jeremydierx]

Check that this is really a bug

• [X] I confirm

Reproduction link

https://github.com/jeremydierx/swiper-svelte-snowpack-issue

Bug description

Hi!

I have follow the tuto to setup Swiper with Svelte and I have an issue when I launch my app through Snowpack:

Failed to init component <App> TypeError: Cannot read properties of undefined (reading '$$')

at init (http://localhost:8080/_snowpack/pkg/swiper.svelte.v7.3.1.js:356:46)
at new Swiper$1 (http://localhost:8080/_snowpack/pkg/swiper.svelte.v7.3.1.js:5153:3)
at create_fragment (http://localhost:8080/App.svelte.js:287:11)
at init (http://localhost:8080/_snowpack/pkg/svelte.internal.v3.44.2.js:1647:35)
at new App (http://localhost:8080/App.svelte.js:382:3)
at createProxiedComponent (http://localhost:8080/_snowpack/pkg/svelte-hmr.runtime.hot-api-esm.v0.13.5.js:242:9)
at new ProxyComponent (http://localhost:8080/_snowpack/pkg/svelte-hmr.runtime.hot-api-esm.v0.13.5.js:482:20)
at new Proxy<App> (http://localhost:8080/_snowpack/pkg/svelte-hmr.runtime.hot-api-esm.v0.13.5.js:581:11)
at http://localhost:8080/index.js:4:11

My snowpack.config.js:

/** @type {import("snowpack").SnowpackUserConfig } / export default { mount: { / ... / }, plugins: [ / ... / '@snowpack/plugin-svelte' ], routes: [ / Enable an SPA Fallback in development: / // {"match": "routes", "src": ".", "dest": "/index.html"}, ], optimize: { /* Example: Bundle your final build: / // "bundle": true, }, packageOptions: { / ... / }, devOptions: { / ... / }, buildOptions: { / ... */ }, }; my index.js:

/* Add JavaScript code here! */ import App from "./App.svelte";

let app = new App({ target: document.body, });

export default app;` my App.svelte:

Learn Svelte

<Swiper spaceBetween={50} slidesPerView={3} on:slideChange={() => console.log('slide change')} on:swiper={(e) => console.log(e.detail[0])}

<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
<SwiperSlide>Slide 4</SwiperSlide>
...

` my Github repo: https://github.com/jeremydierx/swiper-svelte-snowpack-issue

Help needed! :)

Expected Behavior

No response

Actual Behavior

No response

Swiper version

7.3.1

Platform/Target and Browser Versions

Chrome Version 96.0.4664.45 (Build officiel) (64 bits)

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [X] Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• [ ] I'm willing to open a PR

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[nolimits4web]

New Swiper v9 doesn't have Svelte components anymore, it is recommended to use new Swiper Web Components instead.