Crashes when unmounted if imported dynamically [workaround]

[agilgur5]

Describe the bug
When dynamically importing react-monaco-editor, such as for the purpose of code-splitting the gigantic dep that is monaco-editor, some of the default props appear to be dereferenced when react-monaco-editor is unmounted (e.g. the editor component is closed or a user otherwise navigates away).

The error is "editorWillUnmount is not a function", and editorWillUnmount is inside of react-monaco-editor specifically (not monaco-editor). The error suggests that editorWillUnmount does not exist, meaning that the default no-op prop somehow got dereferenced?

Possibly related to the hooks change from componentWillUnmount as mentioned in #660?
Effect clean-up happens in a separate effect, so that may cause a timing issue / race condition that pops up during a lazy load / dynamic import. Normally effects are supposed to be cleaned up within their own scope, and not in a different effect's clean-up function.
I've never seen it done this way and that would be a React anti-pattern, so it could very well be the issue, but not sure.

It also could be an upstream issue with something (with webpack's dynamic import handling? with React.lazy? not sure), but figured I'd post here for posterity and in case anyone else ran into it, especially as code-splitting monaco-editor is pretty common.

The workaround is to redefine editorWillUnmount's default no-op within your own lazy-loaded component, as I did in this PR.

To Reproduce
Here's a thread in Argo Workflows about it: argoproj/argo-workflows#12150 (comment). Another contributor and I both reproduced it. Can repro in the Argo codebase at least.

Expected behavior
Not crash when unmounted and imported dynamically

Screenshots/Logs
Error logs:

editorWillUnmount is not a function
TypeError: editorWillUnmount is not a function
    at MonacoEditor.editorWillUnmount (http://localhost:8080/react-monaco-editor.aa1eea204976d6f1f0d5.js:353:9)
    at MonacoEditor.destroyMonaco (http://localhost:8080/react-monaco-editor.aa1eea204976d6f1f0d5.js:315:18)
    at MonacoEditor.componentWillUnmount (http://localhost:8080/react-monaco-editor.aa1eea204976d6f1f0d5.js:311:14)
    at callComponentWillUnmountWithTimer (http://localhost:8080/main.a6b5256103963195ac8c.js:114879:12)
    at HTMLUnknownElement.callCallback (http://localhost:8080/main.a6b5256103963195ac8c.js:95487:14)
    at Object.invokeGuardedCallbackDev (http://localhost:8080/main.a6b5256103963195ac8c.js:95536:16)
    at invokeGuardedCallback (http://localhost:8080/main.a6b5256103963195ac8c.js:95591:31)
    at safelyCallComponentWillUnmount (http://localhost:8080/main.a6b5256103963195ac8c.js:114886:5)
    at commitUnmount (http://localhost:8080/main.a6b5256103963195ac8c.js:115408:11)
    at commitNestedUnmounts (http://localhost:8080/main.a6b5256103963195ac8c.js:115462:5)

Screenshot:

Environment (please complete the following information):

• OS: macOS Ventura for the browser. the bundler / dev server is running on an Ubuntu Linux devcontainer

• Browser: Chrome 119

• Bundler: webpack 5.89

• I will try to send a pull request to fix this issue.

  • I honestly don't know what the root cause is right now and the workaround was trivial, so my main intent here is actually to post the workaround for others to see.