Error in directive swiper unbind hook: "SyntaxError: Failed to execute 'remove' on 'DOMTokenList': The token provided must not be empty."

[Erreke]

"vue": "^2.5.16", "vue-awesome-swiper": "^3.1.3", "vue-router": "^3.0.1", "vue-server-renderer": "^2.5.16",

Steps to reproduce

Server-rendered Single-Page Application on Vue:

• make two pages;
• in first page make: -- link by router-link to second page; -- swiper slider;
• click on link to go to second page.

What is Expected?

No errors in browser console.

What is actually happening?

There are two errors:

• vue.js:597 [Vue warn]: Error in directive swiper unbind hook: "SyntaxError: Failed to execute 'remove' on 'DOMTokenList': The token provided must not be empty."

• vue.js:1743 DOMException: Failed to execute 'remove' on 'DOMTokenList': The token provided must not be empty. at Dom7.removeClass (.../dist/vendor.js:56905:77) at Swiper.removeClasses (.../dist/vendor.js:59935:7) at Swiper.destroy (.../dist/vendor.js:60513:14) at unbind (.../dist/vendor.js:56664:34) at callHook$1 (.../dist/vendor.js:13003:7) at _update (.../dist/vendor.js:12964:9) at updateDirectives (.../dist/vendor.js:12906:5) at Array.unbindDirectives (.../dist/vendor.js:12900:5) at invokeDestroyHook (.../dist/vendor.js:12454:64) at invokeDestroyHook (.../dist/vendor.js:12458:9)

[lordGuan]

In my case, if I dont init swiper(not call init()), swiper will throw this exception when components would destroy or call destroy() in beforeDestroy hook. So I init swiper in any conditions, swiper would not throw this exception any more.

[pakiam]

Maybe check isInitialized in source code?

[webistomin]

Any updates?

[surmon-china]

Upgrade to v4.x

You can control the update & destroy life-cycle by props.

e.g.

<swiper
  :options="swiperOptionsObject"
  :auto-update="true"
  :auto-destroy="true"
  :delete-instance-on-destroy="true"
  :cleanup-styles-on-destroy="true"
  ...
/>

[reflexator]

If doesnt work for you with vue-awesome-swiper v4.x, for me works downgrade Swiper from 6 to 5

[ehsaneona]

any solution?