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);
}
},