Swiper with React 18 causes TypeError: Cannot read properties of undefined (reading 'slideClass')

[cizz3007]

Check that this is really a bug

• I confirm

Reproduction link

none

Bug description

TypeError: Cannot read properties of undefined (reading 'slideClass')

Expected Behavior

No response

Actual Behavior

Swiper version

8.0.7

Platform/Target and Browser Versions

macOs Chrome latest

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

[cizz3007]

I Guess It was caused by React Strict Mode

[ghost]

Due to React18, there was a problem that you could not specify className for SwiperSlide.

To avoid that I downgraded to React 17.

[github-actions]

Hello @cizz3007. 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.

[Muhammad-Zeshan-Tufail]

Due to React18, there was a problem that you could not specify className for SwiperSlide.
you can use a new div between the SwiperSlide and there use your classes

[dottodot]

I'm having this issue when used with nextjs but just tried to replicate with a basic example on codepen and I'm not getting the error, so there must be something else in my setup causing it. https://codesandbox.io/s/swiper-default-react-forked-3y14np

[raphaelsaunier]

Running into this issue as well with Next.js 12.1.5 + React 18.0.0; at one point getSlideClasses gets called on a destroyed Swiper instance and this causes the exception:

@Muhammad-Zeshan-Tufail's workaround seems to work; if the SwiperSlide component doesn't have a className, no exception is thrown

I'll try to create codesandbox reproduction; @nolimits4web what's your preferred workflow for issues that were closed with the missing demo label? Will you reopen this issue if I post a repro here or shall I create a new issue?

[nolimits4web]

@raphaelsaunier better create a new one

[OlegStrokan]

Setting className on SwiperSlide triggers runtime error with React 18 in strict mode #5656

You are right. I just deleted React.StrictMode and it's working

[jordanlambrecht]

Upgrading to ^8.2.2 seemed to fix it for me without needing to switch strict mode to false

[DongwonTTuna]

To solve this problem, you need to update swiper to latest version.

try this command to update your swiper to latest version.

npm install swiper@latest

or

yarn add swiper@latest

I hope it can help you.

[evgeniy28]

Latest swiper don't work for me.
I fix this problem only downgrade swiper to latest 8 version:

"next": "13.1.5",
"react": "18.2.0",
"react-dom": "18.2.0",
- "swiper": "9.0.2",
+ "swiper": "8.4.7",

[TFMahabub]

Latest swiper don't work for me. I fix this problem only downgrade swiper to latest 8 version:

"next": "13.1.5",
"react": "18.2.0",
"react-dom": "18.2.0",
- "swiper": "9.0.2",
+ "swiper": "8.4.7",

how did you install "swiper": "8.4.7" with yarn?

[mamal72]

It's still there on 9.0.2. The downgrade to 8.4.7 was the only way.

[mahadidev]

If you are using Nextjs Image component inside the slide then:
use: <img src="' alt="" />(which is a simple html tag) instead < Image src="" alt="" / > (which is coming from Nextjs)
So you are using a simple img html element instead of the Image of Nextjs

[diginikkari]

@mahadidev could you elaborate more what should be replaced when using nextjs image component?

[dertuman]

@diginikkari what he means is to use the standard img html element instead of the Image from next.js. I did this and I think as of today is the best solution

[mahadidev]

@mahadidev could you elaborate more what should be replaced when using nextjs image component?

I have updated my comment. please check it out.

[tronglongphung]

@dertuman The latest version worked without using a regular img HTML element

[dertuman]

@dertuman The latest version worked without using a regular img HTML element

Okay I'll give it a shot! Ty.

[tahericode]

Latest swiper don't work for me. I fix this problem only downgrade swiper to latest 8 version:

"next": "13.1.5",
"react": "18.2.0",
"react-dom": "18.2.0",
- "swiper": "9.0.2",
+ "swiper": "8.4.7",

I also had the problem with wrapperClass, and by updating swiper to the latest version, my problem was solved

[Hachikoi-the-creator]

Latest swiper don't work for me. I fix this problem only downgrade swiper to latest 8 version:

"next": "13.1.5",
"react": "18.2.0",
"react-dom": "18.2.0",
- "swiper": "9.0.2",
+ "swiper": "8.4.7",

I really don't think removing the Image Next componet is a good approach since it'll remove it's image optimization features, downgrading swiper to 8.4.7 worked for me as well, even made me able to use the loop={true} prop with no problems!

[krystiangryczon]

In my case downgrading it to 8.4.7 just caused different error of TypeError: Cannot read properties of undefined (reading 'length') :')
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

[fresonn]

Still relevant!
I don't want to disable strict mode.

onSwiper={(swiper) => {
    const el = swiper.el
    el.addEventListener('mouseenter', () => {
      swiper.autoplay.stop()
    })

    el.addEventListener('mouseleave', () => {
      swiper.autoplay.start()
    })
 }}

Error: TypeError: Cannot read properties of undefined (reading 'stop' | 'start')