Swiper crashing with React 18 + Strict Mode

[mmvsk]

Reproduction link

https://codesandbox.io/s/swiper-react-18-gf9bq

Bug description

When using Swiper React with React 18 (currently in RC, to be released soon) and Strict Mode, it crash with the following error:

Cannot read properties of undefined (reading 'wrapperClass')

Basically the swiper object gets destroyed() somewhere, and when in the Swiper class (core/core.js) mount() gets called and tries to access this.params, the swiper object contains nothing else but { destroyed: true }, so the hereinabove error is thrown.

To reproce it:

• Install React 18 (yarn add react@rc react-dom@rc)
• Enable cuncurrent mode (1) by changing ReactDOM.render(REACT_NODE, HTML_ROOT) to ReactDOM.createRoot(HTML_ROOT).render(REACT_NODE)
• Enable React strict mode by wrapping the virtual DOM with <React.StrictMode></React.StrictMode>

(1) About concurrent mode: it's possible to use the normal mode, but then React 18 issue the following deprecation message:

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

Swiper version

7.4.1

Platform/Target and Browser Versions

Linux, Chrome 99.0 (shouldn't matter).

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

[YoLoADR]

Same thing for Next.js, , ow it works. thanks @maxmvsk

[xccjk]

Same thing for Next.js, , ow it works. thanks @maxmvsk

works fine

[xccjk]

I tried as follows

Using swiper in nextjs, when upgrading next and react to the latest version, an error is reported

Cannot read properties of undefined (reading 'wrapperClass')

The relevant dependency information is as follows:

"next": "^12.1.7-canary.30",
"react": "^18.2.0-next-e531a4a62-20220505",
"react-dom": "^18.2.0-next-e531a4a62-20220505",
"swiper": "^7.4.1"

The above problem can be solved when the reactStrictMode in next.config.js is set to false

When you don't want to modify the strict mode of react, you can try to upgrade the swiper to the latest version, and it can be used normally

"next": "^12.1.7-canary.30",
"react": "^18.2.0-next-e531a4a62-20220505",
"react-dom": "^18.2.0-next-e531a4a62-20220505",
"swiper": "^8.2.2"

[jdnichollsc]

Hello folks, I'm testing the latest version of this lib (8.4.6) with the latest version of React (18.2.0) and RemixJS (1.11.0) but I'm still getting this error:

Uncaught TypeError: this.params is undefined
slideTo slideTo.js:2

Can you reopen this issue please?

I need to support this current configuration:

import { RemixBrowser } from '@remix-run/react';
import { startTransition, StrictMode } from 'react';
import { hydrateRoot } from 'react-dom/client';

function hydrate() {
  startTransition(() => {
    hydrateRoot(
      document,
      <StrictMode>
        <RemixBrowser />
      </StrictMode>
    );
  });
}

if (window.requestIdleCallback) {
  window.requestIdleCallback(hydrate);
} else {
  // Safari doesn't support requestIdleCallback
  // https://caniuse.com/requestidlecallback
  window.setTimeout(hydrate, 1);
}

Any help is really appreciated!

[ScorpAL]

Swiper 9.0.2 + React 18.2.0 in StrictMode

Uncaught TypeError: Cannot read properties of undefined (reading 'slideClass')
    at slideSelector (process-lazy-preloader.js:2:1)
    at processLazyPreloader (process-lazy-preloader.js:3:1)
    at HTMLImageElement.<anonymous> (core.js:484:1)

[ScorpAL]

Previous one was not described well...

New one with link to sanbox here: #6342

[Wimmind]

I'm using version 6.8.4 because it doesn't require esm packages, I also need strict mode, but I get this very error, how can I get rid of it?
Swiper 6.8.4 + React 18.1.0

Cannot read properties of undefined (reading 'wrapperClass')

[MohammadWali-hub]

Server Error
TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
eval
node_modules\swiper\swiper-react.mjs (121:54)
(rsc)/./node_modules/swiper/swiper-react.mjs
file:///C:/Users/Admin/OneDrive/Desktop/MCIT-CMS/Web/.next/server/vendor-chunks/swiper.js (80:1)
webpack_require
file:///C:/Users/Admin/OneDrive/Desktop/MCIT-CMS/Web/.next/server/webpack-runtime.js (33:43)
eval
webpack-internal:///(rsc)/./components/Jobcard/jobItem.tsx (15:70)
(rsc)/./components/Jobcard/jobItem.tsx
file:///C:/Users/Admin/OneDrive/Desktop/MCIT-CMS/Web/.next/server/app/[language]/page.js (612:1)
webpack_require
file:///C:/Users/Admin/OneDrive/Desktop/MCIT-CMS/Web/.next/server/webpack-runtime.js (33:43)
eval
webpack-internal:///(rsc)/./components/Jobcard/jobList.tsx (7:66)
(rsc)/./components/Jobcard/jobList.tsx
file:///C:/Users/Admin/OneDrive/Desktop/MCIT-CMS/Web/.next/server/app/[language]/page.js (623:1)
webpack_require
file:///C:/Users/Admin/OneDrive/Desktop/MCIT-CMS/Web/.next/server/webpack-runtime.js (33:43)
eval
webpack-internal:///(rsc)/./app/[language]/page.tsx (26:86)
i have this error

[vanditpatel22]

React 18.3.1
Swiper 11.1.5

Cannot convert undefined or null to object
TypeError: Cannot convert undefined or null to object
at Function.assign ()
at Object.init (http://localhost:3000/static/js/bundle.js:290556:14)
at updateSwiper (http://localhost:3000/static/js/bundle.js:296291:32)
at http://localhost:3000/static/js/bundle.js:296967:67
at commitHookEffectListMount (http://localhost:3000/static/js/bundle.js:214919:30)
at commitLayoutEffectOnFiber (http://localhost:3000/static/js/bundle.js:215019:21)
at commitLayoutMountEffects_complete (http://localhost:3000/static/js/bundle.js:216218:13)
at commitLayoutEffects_begin (http://localhost:3000/static/js/bundle.js:216207:11)
at commitLayoutEffects (http://localhost:3000/static/js/bundle.js:216153:7)
at commitRootImpl (http://localhost:3000/static/js/bundle.js:218062:9)

I have this issue in create the thumb 

Here is the code 

`const CarouselView = () => {

const imagsList = [
    "http://localhost/React-js/Demo/test/api/public/banner/1719460828902.jpeg",
    "http://localhost/React-js/Demo/test/api/public/banner/1719460828902.jpeg",
    "http://localhost/React-js/Demo/test/api/public/banner/1719460828902.jpeg",
    "http://localhost/React-js/Demo/test/api/public/banner/1719460828902.jpeg"
]

const [thumbsSwiper, setThumbsSwiper] = useState(null);




const renderSlide = (image, index) => (
    <SwiperSlide key={index} className='favorite-container'>
        <span className="room_details d-flex justify-content-between align-items-start w-100 position-absolute top-1 bottom-auto z-2">
            <div className="room_type">
                <p>Living Room</p>
            </div>
            <div className="room_share">
                <input type="checkbox" id={`favorite-${index}`} className="favorite-checkbox" />
                <label htmlFor={`favorite-${index}`} className="favorite-heart"></label>
            </div>
        </span>
        <CarouselImage src={image} alt={`Property ${index + 1}`} />
    </SwiperSlide>
);




return (
    <>


        <Swiper
            modules={[FreeMode, Navigation, Thumbs]}
            thumbs={{ swiper: thumbsSwiper }}
            style={{
                '--swiper-navigation-color': '#fff',
                '--swiper-pagination-color': '#fff',
            }}
            spaceBetween={10}
            navigation={true}
            // thumbs={{ swiper: thumbsSwiper }}
            className="swiper mySwiper2 main-imgs"
        >
            {imagsList.map((image, index) => renderSlide(image, index))}
        </Swiper>

        <Swiper
            modules={[FreeMode, Navigation, Thumbs]}
            onSwiper={setThumbsSwiper}
            watchSlidesProgress
            spaceBetween={10}
            slidesPerView={8}
            freeMode={true}
            className="swiper mySwiper mt-1"
        >
            {imagsList && imagsList.map((image, index) => (
                <SwiperSlide key={index} className='favorite-container'>
                    <span>
                        <p>Living Room</p>
                    </span>
                    <CarouselImage src={image} alt={`Property ${index + 1}`} />
                </SwiperSlide>
            ))}
        </Swiper>


    </>



)

}

export default CarouselView;`

[mpetito-envative]

@vanditpatel22 I just ran into this issue in local development with the thumbs module (presumably because of react strict mode). I found that I need to use some check like:

thumbs={{ swiper: thumbsSwiper?.destroyed ? undefined : thumbsSwiper }}

Otherwise, the swiper instance that may be passed could be destroyed, and such an instance does not have the expected properties for the thumbs module to use during its update.