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

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

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.

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 !

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

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

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.

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

vuejs/vue-cli#7431 (comment)

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.

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.

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

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

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.

Still facing the same issue

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

@zehawki

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

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.

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

This worked for me! Thank you very much.

Hope the issue could be reopened and properly addressed. Local development has become impossible.
I am sorry I cannot provide a minimal reproducible example.

Same problem, I have updated from 5.18.1 to 5.29.0 and I am getting this error on dev environment.
react 17.0.2, react-scripts 5.0.1, Chrome 138.0.7204.101,

It is happening after couple of seconds when I am hovering over elements to show tooltips.

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

gabrieljablonski commented on Oct 20, 2023

puneetmakkar commented on Oct 21, 2023

DriesVS commented on Jan 23, 2024

alberthuynh91 commented on Feb 8, 2024

gabrieljablonski commented on Feb 9, 2024

gabrieljablonski commented on Feb 9, 2024

mdv27 commented on Apr 2, 2024

danielbarion commented on May 20, 2024

Fosol commented on May 31, 2024

github-actions commented on Aug 30, 2024

iphonic commented on Sep 20, 2024

zehawki commented on Oct 15, 2024

danielbarion commented on Oct 18, 2024

github-actions commented on Jan 17, 2025

gabrielecastellano commented on Jul 8, 2025

aniawala-autenti commented on Aug 6, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions