Error with lib 'react-lazyload': 'LazyLoad' cannot be used as a JSX component

Viewed 21

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

0 Answers
Related