18

I'm seeing the following error when I dismiss a particular modal:

Error message from React

This didn't happen when I was using react-router v5, but I've recently updated to v6 due to other requirements and it started happening. Funny thing is, I have a second page that invokes the same dialog and it doesn't trigger the error.

(Note that this is a development environment, not a production build. It might not appear in production, or just go to the console.)

I can't seem to find anything through googling... the closest I get are references to "ResizeObserver - loop limit exceeded". I'm puzzled by this, since it doesn't occur on the other page. To make matters worse, the application is using v3 of Bootstrap (company legacy reasons, I don't have the bandwidth right now to address that).

Any ideas?

rjray
  • 5,525
  • 4
  • 31
  • 37
  • `react-router-dom` hasn'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 [mcve] 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. – Drew Reese May 06 '23 at 15:58
  • 1
    Unfortunately, the code is all company-internal. And while I am well-aware of the role of `react-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. – rjray May 06 '23 at 17:19
  • The request wasn't for internal, private, company code, it was for example code that reproduces the issue you face. Sounds like you found a workable solution though. Cheers. – Drew Reese May 08 '23 at 15:22

2 Answers2

15

The dialog in question was rendering a form, and by removing one element at a time I was able to determine that one specific text-entry field was causing the issue.

The problem stemmed from the LastPass browser extension trying to provide the option of auto-fill for that field. If I shortened the width of the field, it no longer caused the error. If I disabled the LP auto-fill icon from appearing, it also solved the issue. I chose the latter, since this was not something that LP could really auto-fill anyway.

I don't know why this only triggered when I upgraded from v5 to v6 of react-router-dom. Our staging and production instances that have not yet received the upgraded code work fine with the LP icon present in the field. Nonetheless, the issue is fixed for me.

rjray
  • 5,525
  • 4
  • 31
  • 37
  • I had same issue and removing LastPass browser extension fix the issue. You saved my day !!! – dev Aug 02 '23 at 20:04
  • 4
    how did you disable the LP auto-fill icon from appearing? – ransom Aug 04 '23 at 07:04
  • https://stackoverflow.com/users/6421/rjray can you explain how you disabled the LP auto-fill please. thxs – Stephane Aug 16 '23 at 20:16
  • Unfortunately, it doesn't seem to work like it used to; I used to add `data-lpignore="true"` to the list of attributes but that no longer works. In the case above I changed the text label associated with the field so that LP no longer interpreted it as a user name. – rjray Aug 29 '23 at 22:47
2

I've stumbled upon a similar problem, though not quite related to react-router per se.

The specs say that this happens in case of infinite resize loops as it's displayed here.

To prevent this from happening, we've figured out using a cunning mediator function, which utilizes window.requestAnimationFrame() to render things properly.

Typescript code:

    const observerCallback: ResizeObserverCallback = (entries: ResizeObserverEntry[]) => {
      window.requestAnimationFrame((): void | undefined => {
        if (!Array.isArray(entries) || !entries.length) {
          return;
        }
        yourResizeHandler();
      });
    };
    const resizeObserver = new ResizeObserver(observerCallback);
Vic
  • 29
  • 4