[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 webpack-dev-server@4.14.0 was to remove the overlay error due to cancelled api calls. I was able to get rid of ResizeObserver overlay error with webpack-dev-server@4.11.1 thanks !

[DriesVS]

Strange, we still have the same issue with webpack-dev-server@4.14.0.

[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);
  }
};

[github-actions[bot]]

This issue is stale because it has not seen activity in 30 days. Remove the stale label or comment within 14 days, or it will be closed.

[iphonic]

Still facing the same issue

[zehawki]

After upgrading to 5.28.0 from 4.2.21 just now, getting continuous ResizeObserver loop completed with undelivered notifications. after moving around on tooltip.

Chrome, React 17, CRA 5

[danielbarion]

@zehawki can you please provide a reproducible example so I can take a detailed look into it?