V6 syntaxError: the string did not match the expected pattern when using swiper on a component page

I am having this issue in pages that has swiper sliders using v6.

I am at the home of the app when I click a link to go to a new page (component page) that has a swiper slider then clicking back to the previous page produce this error in the console.

If I delete all swiper sliders from any page there is no error but when I add the swiper slider again then the error shows up every time I am going back to the previous page and then if I go to the page and want to going back the back button stop working and all clicks on the page.

Is this a bug and anyone knows how to solve this issue?

I tried this in a clean install and the issue on the console again!

error:

SyntaxError: The string did not match the expected pattern.

here the screen shots!

in the component page I have this code taken from sample but any swiper slider in the component page generate that same error!

        <div class="swiper-container demo-swiper-gallery-top">
          <div class="swiper-wrapper">
            <div style="background-image:url(https://cdn.framework7.io/placeholder/nature-800x800-1.jpg)"
              class="swiper-slide"></div>
            <div style="background-image:url(https://cdn.framework7.io/placeholder/nature-800x800-2.jpg)"
              class="swiper-slide"></div>
            <div style="background-image:url(https://cdn.framework7.io/placeholder/nature-800x800-3.jpg)"
              class="swiper-slide"></div>
            <div style="background-image:url(https://cdn.framework7.io/placeholder/nature-800x800-4.jpg)"
              class="swiper-slide"></div>
            <div style="background-image:url(https://cdn.framework7.io/placeholder/nature-800x800-5.jpg)"
              class="swiper-slide"></div>
            <div style="background-image:url(https://cdn.framework7.io/placeholder/nature-800x800-6.jpg)"
              class="swiper-slide"></div>
          </div>
          <div class="swiper-button-next color-white"></div>
          <div class="swiper-button-prev color-white"></div>
        </div>


        <div class="swiper-container demo-swiper-gallery-thumbs">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div style="background-image:url(https://cdn.framework7.io/placeholder/nature-800x800-1.jpg)"
                class="swiper-slide-pic"></div>
            </div>
            <div class="swiper-slide">
              <div style="background-image:url(https://cdn.framework7.io/placeholder/nature-800x800-2.jpg)"
                class="swiper-slide-pic"></div>
            </div>
            <div class="swiper-slide">
              <div style="background-image:url(https://cdn.framework7.io/placeholder/nature-800x800-3.jpg)"
                class="swiper-slide-pic"></div>
            </div>
            <div class="swiper-slide">
              <div style="background-image:url(https://cdn.framework7.io/placeholder/nature-800x800-4.jpg)"
                class="swiper-slide-pic"></div>
            </div>
            <div class="swiper-slide">
              <div style="background-image:url(https://cdn.framework7.io/placeholder/nature-800x800-5.jpg)"
                class="swiper-slide-pic"></div>
            </div>
            <div class="swiper-slide">
              <div style="background-image:url(https://cdn.framework7.io/placeholder/nature-800x800-6.jpg)"
                class="swiper-slide-pic"></div>
            </div>
          </div>
        </div>
  export default (props, {
    $,
    $f7,
    $f7router,
    $update,
    $on,
    $onBeforeMount,
    $onMounted,
    $onBeforeUpdate,
    $onUpdated,
    $onBeforeUnmount,
    $onUnmounted,
    $store,
  }) => {
...

    let swiperTop;
    let swiperThumbs;
    $on('pageInit', () => {
      swiperThumbs = $f7.swiper.create('.demo-swiper-gallery-thumbs', {
        slidesPerView: 4,
        spaceBetween: 10,
        freeMode: true,
        watchSlidesProgress: true,
        watchSlidesVisibility: true,
      });
      swiperTop = $f7.swiper.create('.demo-swiper-gallery-top', {
        spaceBetween: 10,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        thumbs: {
          swiper: swiperThumbs,
        },
      });
    });
    $on('pageBeforeRemove', () => {
      swiperTop.destroy();
      swiperThumbs.destroy();
    });
...

in the router.js

{
    path: '/hotel/:hotelId/',
    async: function ({ app, to, resolve }) {

      app.preloader.show();

      var hotelId = to.params.hotelId;

      var thishotel = store.getters.hotels.value.filter(item => {
        return item.id == hotelId;
      });

      console.log(thishotel);

      setTimeout(function () {

        app.preloader.hide();

        resolve({ 
          component: Store }, 
          { 
            props: { 
              thishotel: thishotel 
            } 
          });

      }, 1000);
      
    }
  },

Update Swiper to latest version

1 Like

I used npm outdated to see all packages that needs update

npm outdated

then I run

npm update

I hope this will solve the issue!
I will report again if this issue still persists after update! but I think it worked! :slightly_smiling_face: :+1:
Thanks a lot for the tip!