You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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<Element, any>' is not assignable to type 'IteratorResult<ReactNode, any>'.
Type 'IteratorYieldResult' is not assignable to type 'IteratorResult<ReactNode, any>'.
Steps to Reproduce:
Set up a new TypeScript project with react-slick.
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'
Explicitly setting children as React.ReactNode[].
Wrapping content within a Fragment (<React.Fragment>).
Ensuring the types match by checking Settings type for react-slick.
The text was updated successfully, but these errors were encountered:
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<Element, any>' is not assignable to type 'IteratorResult<ReactNode, any>'.
Type 'IteratorYieldResult' is not assignable to type 'IteratorResult<ReactNode, any>'.
Steps to Reproduce:
`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 (
<div data-testid={testId ?? 'event-images-slider'}>
<Slider {...settings}>
{eventImages?.map((slide, index) => (
<img src={slide} alt={
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 (<React.Fragment>).
Ensuring the types match by checking Settings type for react-slick.
The text was updated successfully, but these errors were encountered: