I try to use lib 'react-lazyload', but got the error. And if I use @ts-ignore everything works ok.
This is my tsx component
import React, { useEffect, ReactElement } from 'react';
import LazyLoad, { forceVisible } from 'react-lazyload';
import Placeholder from './Placeholder';
import styles from './LazyImage.module.css';
// types
import { ILazyImageProps } from './types';
function LazyImage({
height,
src,
alt,
offset,
once,
isForceVisible,
imgHeight,
imgWidth,
}: ILazyImageProps): ReactElement {
const loaderHeight = { minHeight: height ?? 20 };
const imageSize = { height: imgHeight, width: imgWidth };
useEffect(() => {
if (isForceVisible) forceVisible();
}, [isForceVisible]);
return (
<div style={loaderHeight}>
<LazyLoad
height={height ?? 20}
style={loaderHeight}
offset={offset}
once={once}
placeholder={<Placeholder />}
debounce={10}
>
<img src={src} alt={alt} className={styles.image} style={imageSize} />
</LazyLoad>
</div>
);
}
export default LazyImage;
And this is full text of the error:
TS2786: 'LazyLoad' cannot be used as a JSX component. Its instance type 'LazyLoad' 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("/Users/illia/WebstormProjects/mycoach-front/node_modules/@types/hoist-non-react-statics/node_modules/@types/react/index").ReactNode'. Type '{}' is not assignable to type 'ReactNode'. Type '{}' is missing the following properties from type 'ReactPortal': key, children, type, props