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>
2
Answers
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.
I found the solution to this problem. As discussed in this Github Issue the problem is the version of TypeScript. If you are under 5.1.6 version (I think is under 5) Swiper throw that error.
HOW TO FIX IT: Update TypeScript to 5.1.6 or above.