React: ResizeObserver loop completed with undelivered notifications – Reactjs

The Problem:

React application throws an error message stating ‘ResizeObserver loop completed with undelivered notifications’ on dismissing a particular modal. This issue arises after updating from react-router v5 to v6, but it does not occur on another page with the same modal. Despite extensive research, no concrete solutions have been found, especially considering that the error mentions ‘ResizeObserver’, which is commonly associated with ‘ResizeObserver – loop limit exceeded’.

The Solutions:

Solution 1: Determine the Cause of the Error

The error is triggered by a specific text input field that’s associated with the form in the modal. The issue arises when the LastPass browser extension attempts to enable auto-fill for this field. When the width of the field is reduced or the auto-fill icon is disabled, the issue no longer occurs. This suggests that the cause lies in the interaction between the text field, LastPass, and the upgraded version of React Router (from version 5 to version 6).

Solution 2: Use Request Animation Frame

To prevent the "ResizeObserver loop completed with undelivered notifications" error, you can use a mediator function that utilizes window.requestAnimationFrame(). This ensures proper rendering:

const observerCallback: ResizeObserverCallback = (entries: ResizeObserverEntry[]) => {
  window.requestAnimationFrame(() => {
    if (!Array.isArray(entries) || !entries.length) {
      return;
    }
    yourResizeHandler();
  });
};

const resizeObserver = new ResizeObserver(observerCallback);

Solution 3: Remove Webpack dev server client overlay

Add the following line to your main CSS file, like `app.css` or `app.scss`:

iframe#webpack-dev-server-client-overlay {
  display: none !important;
}

Solution 4: Debounce the Resize Observer

If you are using ResizeObserver and it’s causing an infinite loop, you can solve it by delaying the resize event so that it happens after the paint. You can achieve this in React using a debounce technique:

// Here we are trying to match the size of div to an observed div
// it will affect the original one if it is inside it or next to it...
const observedDivRef = useRef(null);
const delayTimer = useRef(null);

useEffect(() => {
  const observer = new ResizeObserver(() => {
    clearTimeout(delayTimer.current);
    delayTimer.current = setTimeout(() => {
      // check if the observed div is still mounted
      // else this will cause memory leak
      if (observedDivRef.current) {
        setMatchingDivWidth(observedDivRef.current.offsetWidth);
      }
    }, 100);
  });

  observer.observe(observedDivRef.current);

  return () => {
    if (observer && observedDivRef.current) observer.unobserve(observedDivRef.current);
  };
}, []);

This approach ensures that only the last resize event is processed, preventing infinite loops.

Solution 5: Hiding the Error in Webpack

If you’re using Webpack with React and encounter the "ResizeObserver loop completed with undelivered notifications" error, you can optionally hide it by modifying your webpack.config.js file. To do so:

1. Open your webpack.config.js file.
2. Locate the devServer section.
3. Add the following code within the client object:

overlay: {
runtimeErrors: false,
},

If you prefer to forward the error to the console instead of hiding it, use this code instead:

overlay: {
runtimeErrors: (error) => {
  if (error?.message === "ResizeObserver loop completed with undelivered notifications.") {
    console.error(error)
    return false;
  }
  return true;
},
},

By making these changes, you can either hide the error or direct it to the console, depending on your preference.

Video Explanation: