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!

Eduards Egle · Accepted Answer · 2022-07-20 16:42:25Z

7

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>
 );
}

answered Jul 20, 2022 at 16:42

Eduards Egle

1311 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Patrikur Over a year ago

It worked, cheers! Honestly, I think the code from the docs mixed with their code example from the slider I wanted. Just FYI, I still need to keep import Swiper from 'swiper'; plus your solution.

Yijun Kim · Accepted Answer · 2023-07-11 07:44:39Z

I aware of not working on 10.0.4 that works on 9.4.1 because of import { Pagination } from "swiper"

here is working code

// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";

// import required modules
import { Pagination }  from "swiper";

export default function Page(){
    return(
    <Swiper
    pagination={{ dynamicBullets: true }}
    modules={[Pagination]}
    >
    {[0, 6, 12].map((start, slideIndex) => (
        <SwiperSlide key={slideIndex}>
            <div className="grid grid-cols-2 gap-3 pb-10">
                {topSearch.slice(start, start + 6).map((keyword, index) => (
                    <SwiperSlideContent key={`sliderContent${keyword}`} keyword={keyword} index={index + start} />
                ))}
            </div>
        </SwiperSlide>
    ))}
    </Swiper>
)
}

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related