swiper: `Cannot convert undefined or null to object` when using `Thumbs` module

the workaround is thumbs={{ swiper: thumbsSwiper }} replace to thumbs={{ swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null }}

I am facing with this issue as well with Nextjs 12 + React 18

the workaround is thumbs={{ swiper: thumbsSwiper }} replace to thumbs={{ swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null }}

This didn’t work for my case.

From the thumbs React demo, it has const [thumbsSwiper, setThumbsSwiper] = useState(null);

I console logged thumbsSwiper and destroyed was coming up as true. Well, the whole story is that thumbsSwiper was console logging null at first when rendering & then after another render on its own, it gave me the output:Swiper { "destroyed": true }. My guess is that the error in question came up because of that first null rendering from thumbsSwiper.

I just render my component like so: arrOfDataObjs && <MultiSliders />.

So what worked for me was adding thumbsSwiper as a condition to rendering: arrOfDataObjs && thumbsSwiper && <MultiSliders />.

I’m using create-react-app with React v16.13.1 & Swiper v8.2.4

<Swiper cssMode={true} loop={true} spaceBetween={10} navigation={true} thumbs={{ swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null }} onInit={(swiper) => { setInit(swiper); }} modules={[FreeMode, Navigation, Thumbs]} className=“mySwiper2” />

thumbs={{ swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null }}

vaqtinchalik yechim bilan thumbs={{ swiper: thumbsSwiper }} almashtiriladi thumbs={{ swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null }}

buni

vaqtinchalik yechim bilan thumbs={{ swiper: thumbsSwiper }} almashtiriladi thumbs={{ swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null }}

where do we write this?

Seems like this call is incorrect? Should be Swiper.default.defaults. There appears to be something strange happening with the exports.

extend(params, Swiper.defaults); **NOT THE SAME OBJECT BEING PASSED HERE**

function extend(target, src) {
    const noExtend = ['__proto__', 'constructor', 'prototype'];
    Object.keys(src)  **src is undefined**
        .filter((key) => noExtend.indexOf(key) < 0)
...

UPDATE: 14/10/2022 This still doesn’t work for me using Angular@14.2.6 and swiper@8.4.4. Down grading to version swiper@7.41 does fix the issue though. The issue is as described above. In version 7, Swiper seems to be a function and an object in version 8.

@nolimits4web

same problem. src is undefined. use import {Swiper} from ‘swiper/vue’. maybe something wrong in build not using esm import

// swiper/vue/get-params.js
import Swiper from 'swiper';
import { isObject, extend } from './utils.js';
import { paramsList } from './params-list.js';

function getParams(obj = {}) {
  const params = {
    on: {}
  };
  const passedParams = {};
  extend(params, Swiper.defaults); // Swiper.defaults is undefined
  extend(params, Swiper.extendedDefaults); // Swiper.extendedDefaults is undefined
  params._emitClasses = true;

The work-around thumbs={{ swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null }} works but why was this closed? And shouldn’t the docs be updated? Is it because of the missing demo? Maybe someone will be able to provide one? There are many participants in this thread.

My solution to the problem:

TS2339: Property  destroyed  does not exist on type  never

Swiper 11.05

import React, { useState } from 'react';
import { Swiper as SwiperType } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import { FreeMode, Navigation, Thumbs } from 'swiper/modules';
import * as S from './styles';
import detailMain2 from 'assets/img/example/detail/detail-main-2.png';
import detailMain3 from 'assets/img/example/detail/detail-main-3.png';
import detailMain4 from 'assets/img/example/detail/detail-main-4.png';
import detailMain5 from 'assets/img/example/detail/detail-main-5.jpg';

interface ImageItem {
  img: string;
}

const detailCarouselsMain: ImageItem[] = [
  { img: detailMain2 },
  { img: detailMain3 },
  { img: detailMain5 },
  { img: detailMain4 },
  { img: detailMain5 },
];

const ProductCarousel: React.FC = () => {
  const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null);

  console.log('thumbsSwiper', thumbsSwiper);

  return (
    <S.ProductCarousel>
      <Swiper
        spaceBetween={ 10 }
        navigation={ true }
        thumbs={ { swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null } }
        modules={ [FreeMode, Navigation, Thumbs] }
      >
        { detailCarouselsMain.map((instance, index) => (
          <SwiperSlide key={ instance.img + index }>
            <S.ProductCarouselImg src={ instance.img } alt={ 'alt' } />
          </SwiperSlide>
        )) }
      </Swiper>

      <Swiper
        onSwiper={ setThumbsSwiper }
        spaceBetween={ 10 }
        slidesPerView={ 4 }
        freeMode={ true }
        watchSlidesProgress={ true }
        modules={ [FreeMode, Navigation, Thumbs] }
      >
        { detailCarouselsMain.map((instance, index) => (
          <SwiperSlide key={ instance.img + index }>
            <S.ProductCarouselImg src={ instance.img } alt={ 'alt' } />
          </SwiperSlide>
        )) }
      </Swiper>
    </S.ProductCarousel>
  );
};

export default ProductCarousel;

thumbs={{swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null}}

Why is the discussion closed? Tre error is actual #5801

the answer of the MaksimAmelchenko is working