swiper icon indicating copy to clipboard operation
swiper copied to clipboard

Published 20 hours ago • verified publisher icon nolimits4web

Swiper issue with Svelte + Snowpack

Open jeremydierx opened this issue 3 years ago • 1 comments

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

jeremydierx avatar Nov 25 '21 09:11 jeremydierx

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.

stale[bot] avatar Jun 12 '22 14:06 stale[bot]

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

nolimits4web avatar Feb 01 '23 10:02 nolimits4web