Cannot read properties of undefined (reading 'classList')

[muuvmuuv]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/s/musing-chaum-tx84zk?file=/src/app/app.component.html

Bug description

I can't reproduce it actually. The code is the same. Just the application arround it is bigger.

The error is that it says above error when using thumbs. I debugged it and can see that it gets the correct Swiper instance but the slides array does not update or update too late.

Expected Behavior

Perhaps a check if the thumbs instance is fully initialized before using instance props

Actual Behavior

thumbs.js:98 Uncaught TypeError: Cannot read properties of undefined (reading 'classList')
    at update (thumbs.js:98:51)
    at Swiper.<anonymous> (thumbs.js:172:5)
    at events-emitter.js:92:24
    at Array.forEach (<anonymous>)
    at events-emitter.js:91:37
    at Array.forEach (<anonymous>)
    at Swiper.emit (events-emitter.js:84:17)
    at resizeHandler (resize.js:13:5)
    at resize.js:35:11

https://github.com/nolimits4web/swiper/blob/master/src/modules/thumbs/thumbs.js#L115

Swiper version

9.x

Platform/Target and Browser Versions

latest macOS

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• 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

[ser-shant]

keep getting this error in 9.3.2 !!!

thumbs.js:68 Uncaught TypeError: Cannot read properties of undefined (reading 'classList')
at init (thumbs.js:68:1)
at Swiper. (thumbs.js:167:1)
at events-emitter.js:92:1
at Array.forEach ()
at events-emitter.js:91:1
at Array.forEach ()
at Swiper.emit (events-emitter.js:84:1)
at Swiper.init (core.js:459:1)
at mountSwiper (mount-swiper.js:24:1)
at swiper.js:118:1

swiper.thumbs.swiper.el.classList.add(swiper.params.thumbs.thumbsContainerClass);

[Frallen]

Small solution for vue/nuxt developers

Use ref insted useState

I pass the value of swiper directly to ref

<Swiper  @swiper="e=>slider=e" :thumbs="{ swiper: thumbsSwiper }"></Swiper>

//thumbs
<Swiper @swiper="e=>thumbsSwiper=e"></Swiper>

const slider = ref<null>();
let thumbsSwiper = ref<null>();

I didn't need ClientOnly

@ser-shant , @muuvmuuv

[Love-Becca]

React developers check this article for solution. https://medium.com/@0l4m1de/troubleshooting-swiper-js-error-cannot-read-properties-of-undefined-reading-classlist-5064cae037e7