JS Slider made with swiper.js crashes on changing site pages in prod mode

I'm new in frontend and got some problems with swiper.js on my website [https://awaketensei.ru/]. When i changing page from "services" or "work" on any page without slider, it crashes down in a column. But it crashes only when deployed ("npm start" on the localhost or on ubuntu server), "npm run dev" mode works fine.

Project stack: JS + Tailwind (PCSS) + React + next.js

ServiceSlider.js

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/free-mode';
import 'swiper/css/pagination';

// icons
import {
  RxCrop,
  RxDesktop,
  RxReader,
  RxRocket,
  RxArrowTopRight,
} from 'react-icons/rx';

import { FreeMode, Pagination } from 'swiper';

// data
const serviceData = [
  {
    icon: <RxDesktop />,
    title: 'Development',
    description: 'Script and web development, bug-fixing',
  },
  {
    icon: <RxCrop />,
    title: 'Design',
    description: 'Some kind of web-design, AI art generation',
  },
  {
    icon: <RxRocket />,
    title: 'PC Buiding',
    description: 'Servrer or personal PC building',
  },
  {
    icon: <RxReader />,
    title: 'Translation',
    description: 'Professional RU-ENG/ENG-RU translation',
  },
];

const ServiceSlider = () => {
  return ( 
    <Swiper 
      breakpoints={{
        320: {
          slidesPerView: 1,
          spaceBetween: 15,
        },

        640: {
          slidesPerView: 3,
          spaceBetween: 15,
        },
      }}
     freeMode={true}
      pagination={{
        clickable: true,
      }}
      modules={[FreeMode, Pagination]}
      className='h-[240px] sm:h-[340px]'
    >
      {
      serviceData.map((item, index) => {
          return (
            <SwiperSlide key={index}>
              <div className='bg-[rgba(65,47,123,0.15)] h-max rounded-lg px-6 py-8 flex
              sm:flex-col gap-x-6 sm:gap-x-0 group cursor-pointer hover:bg-[rgba(89,65,169,0.15)]
              transition-all duration-300'>
                {/* icon */}
                <div className='text-4xl text-accent mb-4'>
                  {item.icon}
                </div>
                {/* title & desc */}
                <div className='mb-8'>
                  <div className='mb-2 text-lg'>
                    {item.title}
                  </div>
                    <p className='max-w-[350px] leading-normal'>
                      {item.description}
                    </p>
                </div>
                {/* arrow */}
                <div className='text-3xl'>
                  <RxArrowTopRight className='group-hover:rotate-45
                  group-hover:text-accent transition-all duration-300'/>
                </div>
              </div>
            </SwiperSlide>
          );
        })}
    </Swiper>
  );
};
export default ServiceSlider;

Page where slider integrated:

import ServiceSlider from '../../components/ServiceSlider';
import Bulb from '../../components/Bulb';
import Circles from '../../components/Circles';

// framer-motion
import { motion } from 'framer-motion';
import { fadeIn } from '../../variants';

const Services = () => {
  return ( 
    <div className='h-full bg-primary/30 py-36 flex items-center'>
      <Circles />
      <div className='container mx-auto'>
        <div className='flex flex-col xl:flex-row gap-x-8'>
          {/* text */}
          <div className='text-center flex xl:w-[30vw] flex-col lg:text-left 
          mb-4 xl:mb-0'>
              <motion.h2 
                variants={fadeIn('up, 0.3')} 
                initial="hidden" 
                animate="show"
                exit="hidden" 
                className='h2 xl:mt-8'
              >
              My Services <span className='text-accent'>.</span>
              </motion.h2>
              <motion.p 
                variants={fadeIn('up, 0.4')} 
                initial="hidden" 
                animate="show"
                exit="hidden" 
                className='mb-4 max-w-[400px] mx-auto lg:mx-0'>
                Thanks for visiting my website!
              </motion.p>
          </div>

          {/* Slider */}
          <motion.div 
            variants={fadeIn('down, 0.6')} 
            initial="hidden" 
            animate="show"
            exit="hidden" 
            className='w-full xl:max-w-[65%]'
          > 
            <ServiceSlider />
          </motion.div>
        </div>
      </div>
      <Bulb />
    </div>
  );
};
export default Services;

I've researched Internet for several days, but it was useless for me. Tried to found vulnerabilities issues, used edge dev console to check some issues, but I haven't found any problems.

Thanks in advance for your time and answers.

I am on the same project. It took me a couple of hours to solve this out; I hard-tried to find a "proper solution" by using something on the SwiperAPI docs, to no avail.

Finally I found a workaround. It is not the solution I was looking for, but it gets the job done; it hides the slides that are not active on the exit animation.

<Swiper
  navigation={true}
  spaceBetween={10}
  pagination={{ clickable: true }}
  modules={[Navigation, Pagination]}
  className={swiperStyle}
>
  {projectList.slides.map((slide, index) => {
    return (
      <SwiperSlide key={index}>


        {({ isActive }) => (
          isActive ? (
            <motion.div
              variants={fadeIn('down', 0.2)}
              initial="hidden"
              animate="show"
              exit="hidden"
              className={desktopSwiperSlideSt}>
              {slide.projects.map((project, index) => (
                <Card key={project.link} handleDrawer={handleDrawer} project={project} />
              ))}
            </motion.div>
          ) : (
            <motion.div
              variants={fadeIn('down', 0.2)}
              initial="hidden"
              animate="show"
              exit={{ display: "none" }}
              className={desktopSwiperSlideSt}
            >
              {slide.projects.map((project, index) => (
                <Card key={project.link} handleDrawer={handleDrawer} project={project} />
              ))}
            </motion.div>
          )
        )}
      </SwiperSlide>
    )
  })}
</Swiper>

This related incident gave me the lead to reach this solution: https://stackoverflow.com/a/72236097/16451264

Hope it helps!