react swiper - Cannot convert undefined or null to object when using Thumbs module and change dir state on nextjs

[pouyasdz]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/p/sandbox/theme-reducer-context-rtl-and-light-or-dark-mode-forked-t8fyyr?file=%2Fsrc%2FApp.js%3A1%2C1-70%2C1

Bug description

im have next.js version 15 app i need add Thumbs gallery in one page i try this : thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null but always give me error : TypeError: Cannot convert undefined or null to object

simple demo code : https://codesandbox.io/p/sandbox/theme-reducer-context-rtl-and-light-or-dark-mode-forked-t8fyyr

this is my project-detail-thumbs-slider.tsx:

"use client";

import Slider from "@/components/ui/slider";
import Image from "next/image";
import { useState } from "react";
import Swiper from "swiper";
import { FreeMode, Thumbs } from "swiper/modules";

export default function ProjectDetailThumbsSlider() {
  const [thumbsSwiper, setThumbsSwiper] = useState<Swiper | null>(null);

  return (
    <div className="w-full h-full flex flex-col gap-2 rounded-xl">
      <Slider
        childKey="thumbs"
        props={{
          modules: [FreeMode, Thumbs],
          thumbs: {
            swiper:
              thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null,
          },
          className: "w-full h-3/4 rounded-t-xl",
        }}
      >
        {Array(10)
          .fill(0)
          .map((item, index) => (
            <Image
              className="object-cover"
              key={index}
              fill
              src={`https://swiperjs.com/demos/images/nature-${index + 1}.jpg`}
              alt="nature"
            />
          ))}
      </Slider>
      <Slider
        childKey="gallery"
        props={{
          onSwiper: (swiper) => {
            console.log("LINE 45  onSwiper: ", swiper);
            setThumbsSwiper(swiper);
          },
          slidesPerView: 4,
          freeMode: true,
          watchSlidesProgress: true,
          modules: [FreeMode, Thumbs],
          className: "w-full h-1/4 rounded-b-xl",
          spaceBetween: 5,
        }}
      >
        {Array(10)
          .fill(0)
          .map((item, index) => (
            <Image
              className="object-cover"
              key={index}
              fill
              src={`https://swiperjs.com/demos/images/nature-${index + 1}.jpg`}
              alt="nature"
            />
          ))}
      </Slider>
    </div>
  );
}
this is slider:

"use client";
import React from "react";
import { Swiper, SwiperProps, SwiperSlide } from "swiper/react";
import { A11y, Autoplay, Navigation, Pagination } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import { useTheme } from "@/hooks/useTheme";

function Slider({
  children,
  props = {}, // Default to an empty object
  childKey,
}: {
  children: React.ReactNode;
  props?: SwiperProps;
  childKey: string;
}) {
  const { state } = useTheme();

  return (
    <Swiper
      key={`${state.dir} ${childKey}`}
      dir={state.dir}
      modules={[
        Autoplay,
        A11y,
        Navigation,
        Pagination,
        ...(props.modules || []),
      ]}
      {...props}
    >
      {React.Children.map(children, (child, index) => (
        <SwiperSlide key={index}>{child}</SwiperSlide>
      ))}
    </Swiper>
  );
}

export default Slider;

Expected Behavior

im give this error : TypeError: Cannot convert undefined or null to object when change my direction i have two more slider but other slider work without error just this slider because have thumbs or two swiper in one file with same key why i use same key ? because direction in swiper just work with key key = "rtl" im try childKey props key = ${state.dir} ${childKey} but nothing change

how Thumbs gallery work ? when dont change dir or remove key from Slider component key or remove thumbs in project-detail-thumbs-slider.tsx or remove onSwiper action on project-detail-thumbs-slider.tsx

Actual Behavior

No response

Swiper version

11.1.15

Platform/Target and Browser Versions

chrome

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]

t0ggles-create swiper

[t0ggles]

Task nolimits4web/SWIPER-155 was created