Using Swiper in TypeScript: TypeError: Class constructor Swiper cannot be invoked without 'new'

Question

I couldn't find any solution that works with this issue, so I'll give it a try (my first here). I'm working with TypeScript and Next.js, though there is no direct Next.js and TS support from Swiper.

Code in TypeScript:

import { Box } from '@chakra-ui/react';
import React from 'react';
import { SwiperSlide } from 'swiper/react';
import Swiper, { FreeMode, Pagination } from 'swiper';
import SwiperCard from './SwiperCard';
import 'swiper/css';
import 'swiper/css/free-mode';
import 'swiper/css/pagination';

const swiper = new Swiper('.swiper', {
// configure Swiper to use modules
modules: [FreeMode, Pagination],

// Optional parameters
direction: 'horizontal',
loop: true,

// If we need pagination
pagination: {
  clickable: true,
},

  slidesPerView: 3,
  spaceBetween: 30,
  freeMode: true,
});

export default function FrontSwipe() {
return (
  <Box>
    <Swiper>
      <SwiperSlide>
        <SwiperCard>1</SwiperCard>
      </SwiperSlide>
    </Swiper>
  </Box>
 );
}

I get the following error:

TypeError: Class constructor Swiper cannot be invoked without 'new'

Plus following problem shown:

'Swiper' cannot be used as a JSX component.
 Its instance type 'Swiper' is not a valid JSX element.
 Type 'Swiper' is missing the following properties from type 'ElementClass': render, context, setState, forceUpdate, and 3 more.ts(2786)

Thanks in advance!

Answer 1

Try importing Swiper from "swiper/react" Docs

import { Swiper } from 'swiper/react';

But it looks like you might have some name clashes, maybe:

import { Swiper as SwiperComponent } from 'swiper/react';

export default function FrontSwipe() {
return (
  <Box>
    <SwiperComponent>
      <SwiperSlide>
        <SwiperCard>1</SwiperCard>
      </SwiperSlide>
    </SwiperComponent>
  </Box>
 );
}