I was able to fix the ResizeObserver completed with undelivered notifications error by writing local ResizeObserver hook (I'm using Typescript with React, react-router v6, react v17), the code is below.
I have a feeling that this error happens if calling ResizeObserver without checking for ref && ref.current.
In the hook, I return only the height and width of contentBoxSize, but you can modify the return to your needs. I'm using ResizeObserver to dynamically adjust the size of the container with a pdf file in it (I didn't include the pdf-related code, only the hook and a parent component).
type ResizeObserverReturnType = {
height: number | undefined;
width: number | undefined;
}
// The ResizeObserver hook
export const useResizeObserver = (
ref: React.MutableRefObject<HTMLDivElement | null>
): ResizeObserverReturnType => {
const [height, setHeight] = useState<number | undefined>(undefined);
const [width, setWidth] = useState<number | undefined>(undefined);
const observer: ResizeObserver = useMemo(() => {
return new ResizeObserver(([entry]) => {
const height = entry.contentBoxSize[0].blockSize;
const width = entry.contentBoxSize[0].inlineSize;
setHeight(height);
setWidth(width);
});
}, []);
useEffect(() => {
if (ref && ref.current) {
observer.observe(ref.current);
}
// Remove the observer as soon as the component is unmounted
return () => {
observer.disconnect();
};
}, [observer, ref]);
return { height, width };
};
And then in my component I use this hook by providing a ref to it:
type Props = {
testValue: string;
};
export const YourContainer: React.FC<Props> = props => {
// Create ref
const ref = useRef<HTMLDivElement | null>(null);
// Pass ref to observer
const { height = 1, width = 1 } = useResizeObserver(ref);
// Connect ref to your container
return (
<StyledContainer ref={ref}>
{
// Render a component that is changing in size
// Pass required width and/or height
<YourComponent width={width} height={height} />
}
</StyledContainer>
);
};
react-router-domhasn't much to do with any actual UI rendering (it matches a route to the URL path so your UI can render), so I suspect this issue with any resize observer is elsewhere. We can't help address issues in code we can't see though, so please do edit to include a minimal reproducible example of the relevant code you have issue working with and provide the error message and any code stacktrace as plain formatted test instead a picture of text. Images are less accessible, can be more difficult to read, and are not copy/pasteable. – Charioteerreact-router-dom, that was just the only thing that had changed (the component itself had not). Anyway, I was able to isolate it to a single field in the form that the dialog was presenting. A field that Lastpass was trying to offer an autofill option for. Prevent LP from putting its icon in the text field solved the issue. – Weddle