Hydration-related errors occur when Suspense and React.lazy are used in Next.js.

[Jungho-Cheon]

Check that this is really a bug

• [X] I confirm

Reproduction link

codesandbox

Bug description

When I rendered the components that are dynamically imported through React.lazy inside Swiper or SwiperSlide, the following error occurred.

I don't know the internal code in detail, but when I looked at it, it is assumed that the cleanup function of useLayoutEffect is executed, causing re-rendering, and an unintended error occurred as the cloneElement is executed.

Expected Behavior

It should be rendered the same, with no exceptions to dynamic import components.

Actual Behavior

No response

Swiper version

11.1.1

Platform/Target and Browser Versions

macOS chome 123.0.6312.107

Validations

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