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

[dminkovsky]

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.

[lachlanjc]

Any chance #20647 fixes this?

[dminkovsky]

Wow @lachlanjc thanks for noticing the connection to this issue. I will keep an eye on #20647 landing in a release and will test it out when it hits NPM. Judging from the diff I don't think it will make a difference, but maybe this vendored version of ally will not cause this problem. Thanks a lot.

[Timer]

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

[dminkovsky]

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

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.