useRef throws not assignable to type LegacyRef<Slider> | undefined

Question

I'm using react-slick-slider and what I want to achieve is to make custom arrows.
So code looks like this:

const FeedbackSlider = () => {
const [isLargeScreen] = useMediaQuery("(min-width: 1050px)")

const sliderRef = useRef<Slider>()

const prev = () => {
    sliderRef.current?.slickPrev()
}
const next = () => {
    sliderRef.current?.slickNext()
}
const settings = {
    dots: false,
    infinite: true,
    speed: 500,
    slidesToShow: (isLargeScreen ? 2 : 1),
    slidesToScroll: 1,
    prevArrow: (isLargeScreen && <PrevArrow />),
    nextArrow: (isLargeScreen && <NextArrow />)
};
return (
    <Box px={['2', '4', '8', '16']} mx='auto' pt='12'>
        <Slider ref={sliderRef} {...settings}>
           // slider cards...
        </Slider>
        {!isLargeScreen && (
            <Flex alignItems='center' w='5xs' justifyContent='space-between' mx='auto' my='5'>
                <PrevArrow onClick={prev} />
                <NextArrow onClick={next} />
            </Flex>)}
    </Box >)

The Slider used as type is Slider components imported from react-slick which ref I'm taking I'm getting an error only in VScode code works in browser okay:

No overload matches this call. Overload 1 of 2, '(props: Settings | Readonly): Slider', gave the following error. Type 'MutableRefObject<Slider | undefined>' is not assignable to type 'LegacyRef | undefined'. Type 'MutableRefObject<Slider | undefined>' is not assignable to type 'RefObject'. Types of property 'current' are incompatible. Type 'Slider | undefined' is not assignable to type 'Slider | null'. Type 'undefined' is not assignable to type 'Slider | null'. Overload 2 of 2, '(props: Settings, context: any): Slider', gave the following error. Type 'MutableRefObject<Slider | undefined>' is not assignable to type 'LegacyRef | undefined'.

EDIT:

No overload matches this call. Overload 1 of 2, '(props: Settings | Readonly): Slider', gave the following error. Type '{ children: Element[]; dots: boolean; infinite: boolean; speed: number; slidesToShow: number; slidesToScroll: number; prevArrow: false | Element; nextArrow: false | Element; ref: MutableRefObject<...>; }' is not assignable to type 'Readonly'. Types of property 'nextArrow' are incompatible. Type 'false | Element' is not assignable to type 'Element | undefined'. Type 'false' is not assignable to type 'Element | undefined'. Overload 2 of 2, '(props: Settings, context: any): Slider', gave the following error. Type '{ children: Element[]; dots: boolean; infinite: boolean; speed: number; slidesToShow: number; slidesToScroll: number; prevArrow: false | Element; nextArrow: false | Element; ref: MutableRefObject<...>; }' is not assignable to type 'Readonly'. Types of property 'nextArrow' are incompatible. Type 'false | Element' is not assignable to type 'Element | undefined'.

Egghead

Please, provide reproducable example in any playground – Choosy

Answer 1

See this part of the error:

Type 'Slider | undefined' is not assignable to type 'Slider | null'. Type 'undefined' is not assignable to type 'Slider | null'.

useRef adds undefined to the type if it isn't passed a default value. You might wanna pass null like so:

// bad:
const sliderRef = useRef<Slider>() // type: Slider | undefined
// good
const sliderRef = useRef<Slider | null>(null) // type: Slider | null

As for your second error, take a look at the final part an try to infer what's going on:

Types of property 'nextArrow' are incompatible. Type 'false | Element' is not assignable to type 'Element | undefined'.

Seems nextArrow accepts either an Element, or an undefined. Currently you are passing arrows like this:

prevArrow: (isLargeScreen && <PrevArrow />),
nextArrow: (isLargeScreen && <NextArrow />)

Notice that if isLargeScreen is false, it will return false and not undefined, which is not a valid type for the Slider props. Update it to something like this:

prevArrow: (isLargeScreen ? <PrevArrow /> : undefined),
nextArrow: (isLargeScreen ? <NextArrow /> : undefined)

Degression