(alias) class Slide import Slide 'Slide' cannot be used as a JSX component.

[EduardoDevOlmedo]

ERROR

Its instance type 'Slide' is not a valid JSX element. The types returned by 'render()' are incompatible between these types. Type 'React.ReactNode' is not assignable to type 'import("C:/Users/pajar/Desktop/UDEMY/NEXTJS/tesloshop/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'. Type '{}' is not assignable to type 'ReactNode'.ts(2786)

CONTEXT

Just a normal slideshow using Typescript. This is a typescript error that I didn't have before.

CODE

import {FC} from 'react'
import {Slide} from "react-slideshow-image"
import styles from "./ProductSlideShow.module.css"
import 'react-slideshow-image/dist/styles.css'

interface Props {
    images: string[]
}

export const ProductSlideshow: FC<Props> = ({images}) => {
  return (
    <Slide
        easing="ease"
        duration={7000}
        indicators
    >
        {
            images.map(image => {
                const url = `/products/${image}`
                return(
                    <div className={styles['each-slide']} key={"image"}>
                        <div style={{
                            backgroundImage: `url(${url})`,
                            backgroundSize: 'cover'
                        }}>
                        </div>
                    </div>
                )
            })
        }
    </Slide>
  )
}

Fork the following in order to reproduce:

https://github.com/EduardoDevOlmedo/TESLOSHOP

[femioladeji]

@EduardoDevOlmedo thanks for raising this issue. We'll get back to you ASAP

[femioladeji]

@EduardoDevOlmedo can you use the latest version of the package 4.0.3 it has a built in support for typescript. You can remove the type module declaration you currently have

[EduardoDevOlmedo]

This seems to be fixing the bug. I dont really know why it started happening since it used to work properly, and no packages had been updated.