0

I can't seem to get react swiper working in my react typescript app. I get the error 'Swiper cannot be used as a JSX component, Type Swiper is missing the following properties from 'Element Class': render, context, setstate, forceUpdate and 3 more.'

I've installed the latest version which is 9.2.0 and tried downgrading versions and also changing the import statement as per the following link https://swiperjs.com/react#usage-with-create-react-app but i'm still unable to get the library imported correctly.

My component is below.

import React from 'react';
import { IMarket } from '../interfaces/IMarket';
import { ISelection } from '../interfaces/ISelection';
import MultiDisplay from './MultiDisplay';
import SingleDisplay from './SingleDisplay';
import MarketStatusCover from './MarketStatusCover';

import Swiper from 'swiper';
import SwiperSlide from 'swiper/react';
import { Pagination, Navigation } from 'swiper';

interface MarketProps {
    markets: IMarket[];
    marketTypeFilter: string;
}

const swiper = new Swiper('.swiper', {
// configure Swiper to use modules
modules: [Navigation, Pagination],
// Optional parameters
direction: 'vertical',
loop: true,

// If we need pagination
pagination: {
    el: '.swiper-pagination',
},

// Navigation arrows
navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
},


});




function Market(props: MarketProps) {
    const { markets, marketTypeFilter } = props;
    console.log(markets);

    return (
        <>
        <Swiper>
            {markets && markets.map((market: IMarket, index) => (
                <SwiperSlide>
                    (<MarketStatusCover status={market.marketStatus} description={market.marketStatusDescription} />
                    {index == 0 && <div className="text-center headerFontColour">{market.placeDescription}</div>}
                    {market.multiMarketOnOneScreen ?
                        <MultiDisplay selections={market.selections} />
                        :
                        <SingleDisplay selections={market.selections} />
                    }
                    )
                </SwiperSlide>
            ))}
        </Swiper>
    </>
);
}

export default Market;
pinman
  • 93
  • 1
  • 3
  • 13

1 Answers1

0

have not used Swiper but pretty sure you should import Swiper from swiper/react also. Like this

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

You should not import from swiper directly its just used by the swiper react component.

And then all the options you can pass as props to the react Swiper component.

Hope it helps, Best

Max
  • 859
  • 5
  • 10
  • Hey max, thanks for the input. i did try to import that way and a few other variations but just didn't seem to want to work! I ditched it and went for nuka-carousel instead. https://www.npmjs.com/package/nuka-carousel/v/4.8.4. It does everything i need and is lightweight. – pinman Apr 02 '23 at 11:01
  • Nice! yea always nice to try new libraries – Max Apr 02 '23 at 18:21
  • just realised thats an old version i linked to there. That cost me an hour or so as some parts changed from v4 to 5 and i didn't realise! :( https://www.npmjs.com/package/nuka-carousel/v/5.5.1?activeTab=readme – pinman Apr 02 '23 at 18:25