akiran / akiran/react-slick

TypeScript Compatibility Error with react-slick

Aperta
#2,404 3 commenti 0 reazioni 0 assegnatari Vedi su GitHub
Lingua principale
JavaScript
Stelle
11.9k
Fork
2.1k
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

No overload matches this call.
Overload 1 of 2, '(props: Settings): Slider', gave the following error.
Type 'Element[] | undefined' is not assignable to type 'ReactNode'.
Type 'Element[]' is not assignable to type 'ReactNode'.
Type 'Element[]' is not assignable to type 'Iterable'.
The types returned by '[Symbol.iterator]().next(...)' are incompatible between these types.
Type 'IteratorResult' is not assignable to type 'IteratorResult'.
Type 'IteratorYieldResult' is not assignable to type 'IteratorResult'.

**Steps to Reproduce:**
1. Set up a new TypeScript project with react-slick.
2. Use the Slider component as follows:
`import React from 'react'
import Slider, { type Settings } from 'react-slick'
import 'slick-carousel/slick/slick.css'
import 'slick-carousel/slick/slick-theme.css'

export interface ImagesSliderProps {
eventImages?: string[]
testId?: string
}

export function ImagesSlider({ testId, eventImages }: ImagesSliderProps) {
const settings: Settings = {
dots: true,
speed: 500,
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
dotsClass: 'button-bar',
centerMode: true,
centerPadding: '8px',
}

return (



{eventImages?.map((slide, index) => (

{`slide-${index}`}

))}


)
}
`

**Expected Behavior:** The Slider component should render without TypeScript errors.

**Actual Behavior:** The TypeScript compiler throws an error related to ReactNode compatibility for children inside the Slider component.

**System Information:**

TypeScript version: 18.2.20
react-slick version: ^0.30.2
slick-carousel version: 1.8.1
"@types/react-slick": "^0.23.13",

**Workarounds Tried:**

Explicitly setting children as React.ReactNode[].
Wrapping content within a Fragment ().
Ensuring the types match by checking Settings type for react-slick.

Guida per i contributori

Apri la guida per i contributori

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.