swiper-thumbs-gallery-loop-react not working in react js - slider

Question

I'm facing an issue I want to create a swiper thumb gallery slider. the issue is that when I copy code from swiper js and paste it into my react app it's not working and getting an error called The above error occurred in the component:
while the same code is working in the code sandbox. Please help me to create the gallery thumb slider.
import React, { useRef, useState } from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";
// Import Swiper styles
import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/navigation";
import "swiper/css/thumbs";
// import required modules
import { FreeMode, Navigation, Thumbs } from "swiper";
function App () {
const [thumbsSwiper, setThumbsSwiper] = useState(null);
return (
<>
<Swiper
loop={true}
spaceBetween={10}
navigation={true}
thumbs={{ swiper: thumbsSwiper }}
modules={[FreeMode, Navigation, Thumbs]}
className="mySwiper2"
>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-4.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-5.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-6.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-7.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-8.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-9.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-10.jpg" />
</SwiperSlide>
</Swiper>
<Swiper
onSwiper={setThumbsSwiper}
loop={true}
spaceBetween={10}
slidesPerView={4}
freeMode={true}
watchSlidesProgress={true}
modules={[FreeMode, Navigation, Thumbs]}
className="mySwiper"
>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-4.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-5.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-6.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-7.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-8.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-9.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-10.jpg" />
</SwiperSlide>
</Swiper>
</>
);
}
export default App;

Answer 1

Is it working in react?
What about next js?

Answer 2

use this
<BrowserRouter>
<App />
</BrowserRouter>
instead of
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>

Answer 3

This is the final solution for this problem
import React, { useLayoutEffect, useRef, useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/navigation";
import "swiper/css/thumbs";
import SwiperClass from "swiper/types/swiper-class";
import SwiperCore, { FreeMode, Navigation, Thumbs, Controller } from "swiper";
export default function AdSwiper() {
const [thumbsSwiper, setThumbsSwiper] = useState<SwiperCore>();
const [firstSwiper, setFirstSwiper] = useState<SwiperClass>();
const [secondSwiper, setSecondSwiper] = useState<SwiperClass>();
const swiper1Ref = useRef<React.MutableRefObject<null>>(null);
const swiper2Ref = useRef();
useLayoutEffect(() => {
if (swiper1Ref.current !== null) {
swiper1Ref.current.controller.control = swiper2Ref.current;
}
}, []);
return (
<div className="h-[550px] ">
<Swiper
onSwiper={(swiper) => {
if (swiper1Ref.current !== null) {
swiper1Ref.current = swiper;
}
}}
preloadImages={false}
controller={{ control: secondSwiper }}
spaceBetween={10}
slidesPerView={1}
grabCursor={true}
navigation={true}
thumbs={{
swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null,
}}
modules={[FreeMode, Navigation, Thumbs, Controller]}
className="w-[848px] h-[454px] rounded-xl"
>
<SwiperSlide>
<img src="https://a.d-cd.net/9634e6s-960.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://a.d-cd.net/a5634e6s-960.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://a.d-cd.net/13634e6s-960.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://a.d-cd.net/e3634e6s-960.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="http://carsot.com/images/daewoo-nubira-ii-1999-2003-sedan-interior-2.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://www.4tuning.ro/images/elemente-caroserie-din-dezmembrari-daewoo-nubira/elemente-caroserie-din-dezmembrari-daewoo-nubira-8fd6c1475ef586f2cf-1100-615-2-85-1.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://a.d-cd.net/5283186s-480.jpg" className="w-full" />
</SwiperSlide>
<SwiperSlide>
<img src="https://a.d-cd.net/JCAAAgGDAuA-960.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://a.d-cd.net/a5634e6s-960.jpg" />
</SwiperSlide>
</Swiper>
<Swiper
controller={{ control: firstSwiper }}
loop={false}
spaceBetween={10}
slidesPerView={8}
watchSlidesProgress
touchRatio={0.2}
preloadImages={false}
lazy
slideToClickedSlide={true}
onSwiper={setThumbsSwiper}
modules={[Navigation, Thumbs, Controller]}
className="h-[100.4px] w-[848px] mt-[20px] rounded-xl"
>
<SwiperSlide className="w-[70px]">
<img
src="https://a.d-cd.net/9634e6s-960.jpg"
className=" rounded-xl h-[70px]"
/>
</SwiperSlide>
<SwiperSlide className="w-[70px]">
<img
src="https://a.d-cd.net/a5634e6s-960.jpg"
className=" rounded-xl h-[70px]"
/>
</SwiperSlide>
<SwiperSlide className="w-[70px]">
<img
src="https://a.d-cd.net/13634e6s-960.jpg"
className=" rounded-xl h-[70px]"
/>
</SwiperSlide>
<SwiperSlide className="w-[70px]">
<img
src="https://a.d-cd.net/e3634e6s-960.jpg"
className=" rounded-xl h-[70px]"
/>
</SwiperSlide>
<SwiperSlide className="w-[70px]">
<img
src="http://carsot.com/images/daewoo-nubira-ii-1999-2003-sedan-interior-2.jpg"
className=" rounded-xl h-[70px]"
/>
</SwiperSlide>
<SwiperSlide className="w-[70px]">
<img
className=" rounded-xl h-[70px]"
src="https://www.4tuning.ro/images/elemente-caroserie-din-dezmembrari-daewoo-nubira/elemente-caroserie-din-dezmembrari-daewoo-nubira-8fd6c1475ef586f2cf-1100-615-2-85-1.jpg"
/>
</SwiperSlide>
<SwiperSlide className="w-[70px]">
<img
className=" rounded-xl h-[70px]"
src="https://a.d-cd.net/5283186s-480.jpg"
/>
</SwiperSlide>
<SwiperSlide className="w-[70px]">
<img
className=" rounded-xl h-[70px]"
src="https://a.d-cd.net/JCAAAgGDAuA-960.jpg"
/>
</SwiperSlide>
<SwiperSlide className="w-[70px]">
<img
src="https://a.d-cd.net/a5634e6s-960.jpg"
className=" rounded-xl h-[70px]"
/>
</SwiperSlide>
</Swiper>
</div>
);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>