react-dev-overlay ally.js causes MutationObserver infinite loop

Bug report

Describe the bug

react-dev-overlay uses ally.js, which registers and responds to DOM mutations using a MutationObserver. If other MutationObservers are present, this can yield an infinite loop of mutation observing and mutating.

Specifically, in my case, I am using ProseMirror, which also observes the DOM. When the overlay opens and a ProseMirror instance is present, an infinite loop occurs.

Here’s how it goes:

1 - The overlay initializes in a useEffect. As part of its initialization, it mutates the DOM

2 - ProseMirror detects this mutation, and mutates the DOM too,

3 - ally.js’s MutationObservers detect the mutation, and perform their own mutations

And round and round it goes from there… every time I get an error on this route, I have to kill the tab in task manager! It’s really painful. Now that I’ve identified the error, I think I might edit node_modules to disable the underlying cause, but a proper solution would be great.

Thank you!

System information

• Version of Next.js: [e.g. 6.0.2] 9.5.3

Update

Indeed, commenting the ally initialization code from the useEffect in overlay resolves the issue locally.

[dminkovsky]

@Timer @lachlanjc Yes, this issue is gone in 10.0.5-canary.9. Thanks again!

[Timer]

This should be fixed in next@^10.0.5-canary.7, please give it a try!