Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeScript Compatibility Error with react-slick #2404

Open
waseemViwell opened this issue Nov 12, 2024 · 2 comments
Open

TypeScript Compatibility Error with react-slick #2404

waseemViwell opened this issue Nov 12, 2024 · 2 comments

Comments

@waseemViwell
Copy link

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:

  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 (
<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.

@rohit-ht-123
Copy link

i got the same problem perviously

@waseemViwell
Copy link
Author

@rohit-ht-123 how did you fix it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants