[BUG] ResizeObserver loop completed with undelivered notifications - webpack-dev-server related

[puneetmakkar]

After upgrading to 5.21.5 (from 4.2.21), I am getting this error locally sometimes when tooltip is opened. Maybe its due to the usage of ReactObserver

react-scripts v5 brings in webpack-dev-server v4 which shows runtime errors on full screen.

Potential fix and more details can be seen here.

Reproduction Happens sometimes when opening the react tooltip component

Expected behavior Not getting the error.

Screenshots

OS: MacOS. Browser: Chrome

[gabrieljablonski]

Can you test this after disabling all of your browser extensions? Or try it on another browser.

Which solution from the StackOverflow question are you suggesting? The usage of requestAnimationFrame() doesn't seem like something I'd be comfortable adding right now.

I've also seen a suggestion to set the version for webpack-dev-server to v4.14.0. See it that helps.

[puneetmakkar]

I guess [email protected] was to remove the overlay error due to cancelled api calls. I was able to get rid of ResizeObserver overlay error with [email protected] thanks !

[DriesVS]

Strange, we still have the same issue with [email protected].

[alberthuynh91]

Running into this issue as well on react 16.13, react-tooltip 5.26, using webpack with craco

[gabrieljablonski]

Although it seems like this is a "benign" error message (as in you can safely ignore it, shouldn't break anything on production app), it is still annoying to deal with it during development.

Should've been fixed on #1137, which is >=v5.25.1 (also see #1136 for context).

Will reopen until we can figure out why it's back.

[gabrieljablonski]

Here's the webpack config on how to ignore the specific error (untested, let me know if it works)

https://github.com/vuejs/vue-cli/issues/7431#issuecomment-1821173102

module.exports = {
  //...
  devServer: {
    client: {
      overlay: {
        runtimeErrors: (error) => {
          const ignoreErrors = [
            "ResizeObserver loop limit exceeded",
            "ResizeObserver loop completed with undelivered notifications.",
          ];
          return !ignoreErrors.includes(error.message);
        },
      },
    },
  },
};

Again, we're assuming this error can be safely ignored, since there hasn't been any evidence of it interfering with expected tooltip behavior.

Will still keep this open until we can figure out a permanent fix.

[mdv27]

module.exports = {
  //...
  devServer: {
    client: {
      overlay: {
        runtimeErrors: (error) => {
          const ignoreErrors = [
            "ResizeObserver loop limit exceeded",
            "ResizeObserver loop completed with undelivered notifications.",
          ];
          return !ignoreErrors.includes(error.message);
        },
      },
    },
  },
};

This does not work for me.

[danielbarion]

Hey guys, can you please provide a simple reproducible repository? I would like to take a look when I have some available time

[Fosol]

Only workaround I've found is

//Stop error resizeObserver
const debounce = (callback: (...args: any[]) => void, delay: number) => {
  let tid: any;
  return function (...args: any[]) {
    // eslint-disable-next-line no-restricted-globals
    const ctx = self;
    tid && clearTimeout(tid);
    tid = setTimeout(() => {
      callback.apply(ctx, args);
    }, delay);
  };
};

const _ = (window as any).ResizeObserver;
(window as any).ResizeObserver = class ResizeObserver extends _ {
  constructor(callback: (...args: any[]) => void) {
    callback = debounce(callback, 20);
    super(callback);
  }
};