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?:)

Declassify

Did you figure this out? I just came across this on a typeahead component. – Chambers

was seeing the same problem, was occurring because the dom element was not on the page yet at the time it was trying to be referenced – Suzette

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)

Suzette

I agree with the idea but not the execution. For those having the same issue and you want to check whether an element is rendered, use the mutationObserver method. Its great and much cleaner than a timeout – Declassify

@Declassify I'm assuming mutationObserver will not overcomplicate things / is easier to read than adding a 1 line timeout? – Suzette

Answer 2

This is because the observer didn't receive the values of the variables.

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


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

export default function Background(props) {

const [screenSizes,setScreenSize] = React.useState('')
const [imgSrc,setImageSrc] = React.useState('')


React.useEffect(()=>{
   setScreenSize(props.screenSize);
 },[props.screenSize])

React.useEffect(()=>{
   setImageSrc(props.src);
 },[props.src])

return (
        <BackgroundImage
            xs={screenSizes==='xs'}
            sm={screenSizes==='sm'}
            md={screenSizes==='md'}
            lg={screenSizes==='lg'}
            fluid={props.imgSrc}
            style={{ height: `${props.height || 'auto'}`, width: 
           `${props.width || 'auto'}`, margin: '1rem' }}
        >
            {props.children}
        </BackgroundImage>
    );
} 

Coherent