React Swiper Property 'slidesPerView' does not exist on type 'IntrinsicAttributes & RefAttributes<SwiperRef> & SwiperProps'

Question

I'm using React, Typescript and Swiper. I'm also on Shopify Hydrogen with server components. Which maybe preventing the files from finding the type definitions because creating a new Typscript app and installing Swiper doesn't have this issue.

Running "swiper": "^8.4.5", react": "^18.2.0", "@shopify/hydrogen": "^1.6.0",

Property 'slidesPerView' does not exist on type 'IntrinsicAttributes & RefAttributes<SwiperRef> & SwiperProps'

It's not just slidesPerView, but other props as well.

Is there anything else I need to install? I ran yarn add swiper

my component looks like.

import {Swiper, SwiperSlide, SwiperRef} from 'swiper/react'

// Import Swiper styles
import 'swiper/css'

return (
    <Swiper
      ref={swiperRef}
      slidesPerView={3}
      spaceBetween={30}
    >
      {slides.map((slide) => {
        return (
          <SwiperSlide key={slide.id}>
            <Image ... />
          </SwiperSlide>
        )
      })}
    </Swiper> 

Answer 1

Is there a solution on this case? I tried almost all the solutions but non of them worked. I'm working on create-react-app --template typescript. When I was working without --template typescript there was no problem like this.

Update: I SOLVED the problem. I downgraded the swiper from v10.0.4 to v9.4.1 and type problems gone. higher versions from v9.4.1 has these type problems. So I advise you guys to use lower versions of swiper.