swiper instance: Cannot read properties of undefined (reading 'slideChange') with React 18

[b-novikov-ipersonality]

Check that this is really a bug

• I confirm

Reproduction link

upd: https:/b-novikov-ipersonality/swiper-react18-bug

Bug description

After initializing swiper instance by passing <Swiper> component setState function, when using any of the swiper instance events, for example

swiper.on('slideChange', (swiper) => ...)

or any other, I get runtime error: TypeError: Cannot read properties of undefined (reading 'activeIndexChange')

error img

Note that Swiper has many problems with React 18, among them #5613 #5630 #5609 so it's probably some form of incompatibility with react 18. Maybe until the fix is released you should make Swiper require react <18.0.0?

Steps to reproduce:

1. create new react app
2. paste following code into component

export default function Home() {
  const [swiper, setSwiper] = useState(null);
  const [currentSlide, setCurrentSlide] = useState(0);
  useEffect(() => {
    if (swiper) {
      swiper.on('activeIndexChange', (swiper) => {
        setCurrentSlide(swiper.realIndex);
      })
    }
  }, [swiper])
  return (
        <>
          <h1>CURRENT SLIDE: {currentSlide}</h1>
          <Swiper draggable className={styles.swiper} onSwiper={setSwiper}>
            <SwiperSlide>1</SwiperSlide>
            <SwiperSlide>2</SwiperSlide>
            <SwiperSlide>3</SwiperSlide>
            <SwiperSlide>4</SwiperSlide>
            <SwiperSlide>5</SwiperSlide>
          </Swiper>
        </>
  );
}

3. use component somewhere in your app
4. experience error and sorrow

Expected Behavior

I can use event listeners on swiper instances without error

Actual Behavior

When using event listeners on swiper instance error TypeError: Cannot read properties of undefined (reading 'event_name') occur where event_name is the name of the used event

Swiper version

"^8.1.1"

Platform/Target and Browser Versions

linux, chrome Version 100.0.4896.88 (Official Build) (64-bit)

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

[nolimits4web]

Would be good to see live example with the issue (without Next, as it could be a problem), so far I couldn't replicate it

[github-actions]

Hello @b-novikov-ipersonality. Please provide a online reproduction by codesandbox or a minimal GitHub repository. You can fork one of our demos in codesandbox to get start. Issues labeled by missing demo will be closed if no activities in 3 days.

[b-novikov-ipersonality]

@nolimits4web I updated repository that is in reproduction link

$ git clone [email protected]:b-novikov-ipersonality/swiper-react18-bug.git
$ cd swiper-react18-bug
$ yarn
$ yarn start

[nolimits4web]

Would be still good to see issue in code sandbox as you can see all works correctly here https://codesandbox.io/s/swiper-default-react-forked-wxrchz?file=/src/App.jsx, try also to remove React.StrictMode

[b-novikov-ipersonality]

@nolimits4web, problem is only reproducible with Strict mode enabled. But in my opinion removing strict mode shouldn't be a permanent solution because strict mode helps here and there in development.

[vandreleal]

Hi @b-novikov-ipersonality , were you able to address this issue without disabling strict mode?

[b-novikov-ipersonality]

@vandreleal hey. It was fixed by @nolimits4web.
If it still does not work for you, the workaround was provided by @MaksimAmelchenko:

...
if (swiper && !swiper.destroyed) {...}
...

[krystiangryczon]

for me there was slightly different error of TypeError: Cannot read properties of undefined (reading 'cssMode'), and actually it was the Cookiebot interfering with this somehow, check out here

[riccardolardi]

for me there was slightly different error of TypeError: Cannot read properties of undefined (reading 'cssMode'), and actually it was the Cookiebot interfering with this somehow, check out here

@krystiangryczon have you found a workaround or solution?