typeError: Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element'

Question

To explain the context, I am building a instagram carousal for a gatsby project. The images within the carousel are displayed by

                  {data.allInstaNode.edges.map((image) => (
                        <Background
                            src={image.node.localFile.childImageSharp.fluid}
                            className="img-fluid"
                            height="38vh"
                            width="100%"
                        />
                    ))}

The Background component that is rendering the images uses Gatsby background image and is as follows

import React from 'react';
import BackgroundImage from 'gatsby-background-image';

export default function Background(props) {
    return (
        <BackgroundImage
            xs={props.xs}
            sm={props.sm}
            md={props.md}
            lg={props.lg}
            fluid={props.src}
            style={{ height: `${props.height}`, width: `${props.width}`, margin: '1rem' }}
        >
            {props.children}
        </BackgroundImage>
    );
}

This problem is that this content used to render just fine, and does not do so now as it is is giving me this error - TypeError: Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element'.

I did some searching to solve this issue and came across this solution which seems to be promising but is not very clear to me- https://github.com/souporserious/react-measure/issues/76

can anyone help?:)

Answer 1

This is occurring because the element does not exist yet at the time you are attempting to reference it.

You can use setTimeout(() => { yourCode },100) so it will wait 100ms before attempting to access the dom element, or you can use

await waitUntil(() => myDomElement != null, { timeout: 20000 });
.... <your code> 

This will wait for your element to be not null before running your code (above code will wait up to 20s, timeout is in ms)