[React Editor] Cannot read properties of null (reading 'parentNode') in StrictMode

[martin-fleck-at]

I have a scenario where in React StrictMode it can happen that the containerRef.current we use to start the editor app is actually null. I assume that it is a race condition between the StrictMode double-mount and the global queue.

• First mount schedules editorInit via addQueue('editorInit', editorInit).
• React immediately unmounts the component (StrictMode dev behavior), sets containerRef.current = null.
• The queued editorInit runs after that unmount, so at: await editorAppRef.current.start(containerRef.current!);
  → containerRef.current is null → error

If I slow it down by debugging on a breakpoint, it often works because the queue sometimes runs after the second mount, where React has already set containerRef.current to the new DOM node. So it seems that the timing decides whether we get null or not.

It is hard to reproduce for me in a test scenario but in my use case I can easily see it. If I don't use StrictMode, everything works as expected.

I can see the following in my log:

log.js:155 DEBUG CONFIG PROCESSED: 1763120903595
log.js:155 DEBUG CONFIG PROCESSED: Done: 1763120903596
log.js:155 DEBUG >>>>>>>>>>>>>>>>>>>>>>>>>>>>>
log.js:155 DEBUG Adding to queue: editorInit: QUEUE SIZE before: 0
log.js:155 DEBUG >>>>>>>>>>>>>>>>>>>>>>>>>>>>>
log.js:155 DEBUG Adding to queue: disposeEditor: QUEUE SIZE before: 1
log.js:155 DEBUG CONFIG PROCESSED: 1763120903598
log.js:155 DEBUG CONFIG PROCESSED: Done: 1763120903598
log.js:155 DEBUG >>>>>>>>>>>>>>>>>>>>>>>>>>>>>
log.js:155 DEBUG Adding to queue: editorInit: QUEUE SIZE before: 2
log.js:155 DEBUG Checking queue...false
index.tsx:53 Queue size: 3
log.js:155 DEBUG <<<<<<<<<<<<<<<<<<<<<<<<<<<<<
log.js:155 DEBUG QUEUE editorInit start: SIZE before: 3: 1763120903623
log.js:155 DEBUG INIT EDITOR: 1763120903623
log.js:155 DEBUG INIT: Creating editor: 1763120903623
log.js:155 DEBUG INIT EDITOR: Done: 1763120903677
log.js:155 DEBUG QUEUE editorInit end: SIZE after: 2
log.js:155 DEBUG <<<<<<<<<<<<<<<<<<<<<<<<<<<<<
log.js:155 DEBUG QUEUE disposeEditor start: SIZE before: 2: 1763120903681
log.js:155 DEBUG DISPOSE: 1763120903681
log.js:155 DEBUG >>>>>>>>>>>>>>>>>>>>>>>>>>>>>
log.js:155 DEBUG Adding to queue: disposeEditor: QUEUE SIZE before: 1
log.js:155 DEBUG DISPOSE DONE: 1763120903688
log.js:155 DEBUG QUEUE disposeEditor end: SIZE after: 2
log.js:155 DEBUG <<<<<<<<<<<<<<<<<<<<<<<<<<<<<
log.js:155 DEBUG QUEUE editorInit start: SIZE before: 2: 1763120903688
log.js:155 DEBUG INIT EDITOR: 1763120903688
log.js:155 DEBUG INIT: Creating editor: 1763120903688
log.js:155 DEBUG ERROR: Cannot read properties of null (reading 'parentNode'): 1763120903689
log.js:155 DEBUG INTERCEPTED Error: TypeError: Cannot read properties of null (reading 'parentNode'). Stopping queue...
dom.js:578 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')
    at getShadowRoot (dom.js:578:20)
    at isInShadowDOM (dom.js:575:14)
    at StandaloneThemeService.registerEditorContainer (standaloneThemeService.js:222:13)
    at new StandaloneEditor2 (standaloneCodeEditor.js:165:51)
    at new <anonymous> (injection.js:16:13)
    at new ConfiguredStandaloneEditor (monaco.js:86:13)
    at _InstantiationService._createInstance (instantiationService.js:129:24)
    at _InstantiationService.createInstance (instantiationService.js:103:27)
    at Object.createConfiguredEditor [as create] (monaco.js:298:10)
    at EditorApp.createEditors (editorApp.ts:220:41)
getShadowRoot @ dom.js:578
isInShadowDOM @ dom.js:575
registerEditorContainer @ standaloneThemeService.js:222
StandaloneEditor2 @ standaloneCodeEditor.js:165
(anonymous) @ injection.js:16
ConfiguredStandaloneEditor @ monaco.js:86
_createInstance @ instantiationService.js:129
createInstance @ instantiationService.js:103
createConfiguredEditor @ monaco.js:298
createEditors @ editorApp.ts:220
await in createEditors
start @ editorApp.ts:171
editorInit @ index.tsx:213
executeQueue @ index.tsx:62
await in executeQueue
(anonymous) @ index.tsx:74
setInterval
kickQueue @ index.tsx:71
addQueue @ index.tsx:49
(anonymous) @ index.tsx:322
react_stack_bottom_frame @ react-dom-client.development.js:23953
runWithFiberInDEV @ react-dom-client.development.js:1519
commitHookEffectListMount @ react-dom-client.development.js:11905
commitHookPassiveMountEffects @ react-dom-client.development.js:12026
reconnectPassiveEffects @ react-dom-client.development.js:14004
recursivelyTraverseReconnectPassiveEffects @ react-dom-client.development.js:13976
commitPassiveMountOnFiber @ react-dom-client.development.js:13936
recursivelyTraversePassiveMountEffects @ react-dom-client.development.js:13815
commitPassiveMountOnFiber @ react-dom-client.development.js:13903
recursivelyTraversePassiveMountEffects @ react-dom-client.development.js:13815
commitPassiveMountOnFiber @ react-dom-client.development.js:13957
recursivelyTraversePassiveMountEffects @ react-dom-client.development.js:13815
[...]
log.js:155 DEBUG Checking queue...false
index.tsx:53 Queue size: 1
log.js:155 DEBUG <<<<<<<<<<<<<<<<<<<<<<<<<<<<<
log.js:155 DEBUG QUEUE disposeEditor start: SIZE before: 1: 1763120903693
log.js:155 DEBUG DISPOSE: 1763120903693
log.js:155 DEBUG DISPOSE DONE: 1763120903693
log.js:155 DEBUG QUEUE disposeEditor end: SIZE after: 0
log.js:155 DEBUG Stopping queue...

[kaisalmen]

@martin-fleck-at thank you. That one I haven't seen, yet. The check on containerRef.current is only done once in globalInit, but not repeated later. That is wrong or it did not evolve with the latest changes. The editor start has to check and try to wait a bit in a loop and give up at some point. This is just a timing thing in StrictMode, I suspect like you.

[martin-fleck-at]

@kaisalmen Yes, it definitely only happens in StrictMode. We probably need two things:

• Guarding against using the ref when there’s no DOM.
• Making sure queued jobs from a previous mount don’t run in the next mount. So we probably need to adapt this effect to something like this and make sure that all queued functions only run for a particular render id (untested):

    const renderIdRef = useRef(0);

    useEffect(() => {
        // this part runs on mount (componentDidMount)
        const myRenderId = ++renderIdRef.current;

        // always try to perform global init. Reason: we cannot ensure order
        performGlobalInit();

        // this part runs on unmount (componentWillUnmount)
        return () => {
            // enqueue a dispose bound to THIS mount
            const disposeForThisRender = async () => {
                // if a newer mount exists, ignore this dispose (StrictMode fake unmount)
                if (myRenderId !== renderIdRef.current) {
                    debugLogging('DISPOSE: skipped (stale render)', true);
                    return;
                }
                await disposeEditor();
            };
            addQueue ('disposeEditor', disposeForThisRender);
        };
    }, []);

[kaisalmen]

@martin-fleck-at I think I have found a quite elegant solution, see PR #995

[kaisalmen]

Sorry, the issue was auto-closed. I will release 7.3.0 soon. If there is the need for further fixes, we will release new versions. The situation in general should be a lot better with 7.3.0 compared to 7.2.0.

[kaisalmen]

Final releases are available since yesterday:
https://www.npmjs.com/package/monaco-languageclient/v/10.3.0
https://www.npmjs.com/package/@typefox/monaco-editor-react/v/7.3.0

[martin-fleck-at]

I no longer see the reading of null as a parent but instead I now encounter a problem (again, only in StrictMode) where the editor is disposed and not showing up correctly:

log.js:155 DEBUG BUG CONFIG PROCESSED: 1763459509514
log.js:155 DEBUG CONFIG PROCESSED: Done: 1763459509514
log.js:155 DEBUG >>>>>>>>>>>>>>>>>>>>>>>>>>>>>
log.js:155 DEBUG Adding to queue: editorInit: QUEUE SIZE before: 0
log.js:155 DEBUG >>>>>>>>>>>>>>>>>>>>>>>>>>>>>
log.js:155 DEBUG Adding to queue: disposeEditor: QUEUE SIZE before: 1
log.js:155 DEBUG CONFIG PROCESSED: 1763459509518
log.js:155 DEBUG CONFIG PROCESSED: Done: 1763459509518
log.js:155 DEBUG >>>>>>>>>>>>>>>>>>>>>>>>>>>>>
log.js:155 DEBUG Adding to queue: editorInit: QUEUE SIZE before: 2
log.js:155 DEBUG Checking queue...false
log.js:155 DEBUG <<<<<<<<<<<<<<<<<<<<<<<<<<<<<
log.js:155 DEBUG QUEUE editorInit start: SIZE before: 3: 1763459509527
log.js:155 DEBUG INIT EDITOR: 1763459509527
log.js:155 DEBUG INIT EDITOR: Creating editor: 1763459509527
log.js:155 DEBUG INIT EDITOR: Done: 1763459509536
log.js:155 DEBUG QUEUE editorInit end: SIZE after: 2
log.js:155 DEBUG <<<<<<<<<<<<<<<<<<<<<<<<<<<<<
log.js:155 DEBUG QUEUE disposeEditor start: SIZE before: 2: 1763459509536
log.js:155 DEBUG DISPOSE: 1763459509536
log.js:155 DEBUG >>>>>>>>>>>>>>>>>>>>>>>>>>>>>
log.js:155 DEBUG Adding to queue: disposeEditor: QUEUE SIZE before: 1
log.js:155 DEBUG DISPOSE DONE: 1763459509540
log.js:155 DEBUG QUEUE disposeEditor end: SIZE after: 2
log.js:155 DEBUG <<<<<<<<<<<<<<<<<<<<<<<<<<<<<
log.js:155 DEBUG QUEUE editorInit start: SIZE before: 2: 1763459509540
log.js:155 DEBUG INIT EDITOR: 1763459509540
log.js:155 DEBUG INIT EDITOR: Creating editor: 1763459509540
log.js:155 DEBUG INIT EDITOR: Done: 1763459509545
log.js:155 DEBUG QUEUE editorInit end: SIZE after: 1
log.js:155 DEBUG <<<<<<<<<<<<<<<<<<<<<<<<<<<<<
log.js:155 DEBUG QUEUE disposeEditor start: SIZE before: 1: 1763459509545
log.js:155 DEBUG DISPOSE: 1763459509545
log.js:155 DEBUG DISPOSE DONE: 1763459509546
log.js:155 DEBUG QUEUE disposeEditor end: SIZE after: 0
log.js:155 DEBUG Stopping queue...

We can see the following order: editorInit > diposeEditor > editorInit > disposeEditor.

This seems to be a race condition because if I add a breakpoint or a short pause (e.g., in the disposeEditor) we might get a sequence that does not dispose the editor immediately: editorInit > diposeEditor > editorInit. Though, I'm not sure what could be causing this.

[kaisalmen]

@martin-fleck-at ok, I will have a look and I think the timestamps must be improved.

[martin-fleck-at]

With the latest version, I still see the same behavior as before. Here are the newer logs:

log.js:155 DEBUG [19:0:613]: >>>>>>>>>>>>>>>>>>>>>>>>>>>>>
log.js:155 DEBUG [19:0:614]: Adding to queue: editorInit: QUEUE SIZE before: 0
log.js:155 DEBUG [19:0:614]: REPROCESS CONFIG: Denied
log.js:155 DEBUG [19:0:615]: ENFORCE DISPOSE LC: Denied
log.js:155 DEBUG [19:0:615]: >>>>>>>>>>>>>>>>>>>>>>>>>>>>>
log.js:155 DEBUG [19:0:615]: Adding to queue: disposeEditor: QUEUE SIZE before: 1
log.js:155 DEBUG [19:0:616]: >>>>>>>>>>>>>>>>>>>>>>>>>>>>>
log.js:155 DEBUG [19:0:616]: Adding to queue: editorInit: QUEUE SIZE before: 2
log.js:155 DEBUG [19:0:616]: REPROCESS CONFIG: Denied
log.js:155 DEBUG [19:0:616]: ENFORCE DISPOSE LC: Denied
log.js:155 DEBUG [19:0:624]: Checking queue...false
log.js:155 DEBUG [19:0:625]: <<<<<<<<<<<<<<<<<<<<<<<<<<<<<
log.js:155 DEBUG [19:0:625]: QUEUE editorInit start: SIZE before: 3
log.js:155 DEBUG [19:0:633]: INIT EDITOR: Editor start was successful.
log.js:155 DEBUG [19:0:633]: QUEUE editorInit end: SIZE after: 2
log.js:155 DEBUG [19:0:633]: <<<<<<<<<<<<<<<<<<<<<<<<<<<<<
log.js:155 DEBUG [19:0:634]: QUEUE disposeEditor start: SIZE before: 2
log.js:155 DEBUG [19:0:637]: >>>>>>>>>>>>>>>>>>>>>>>>>>>>>
log.js:155 DEBUG [19:0:638]: Adding to queue: disposeEditor: QUEUE SIZE before: 1
log.js:155 DEBUG [19:0:639]: DISPOSE: EditorApp was disposed
log.js:155 DEBUG [19:0:639]: QUEUE disposeEditor end: SIZE after: 2
log.js:155 DEBUG [19:0:639]: <<<<<<<<<<<<<<<<<<<<<<<<<<<<<
log.js:155 DEBUG [19:0:639]: QUEUE editorInit start: SIZE before: 2
log.js:155 DEBUG [19:0:643]: INIT EDITOR: Editor start was successful.
log.js:155 DEBUG [19:0:643]: QUEUE editorInit end: SIZE after: 1
log.js:155 DEBUG [19:0:643]: <<<<<<<<<<<<<<<<<<<<<<<<<<<<<
log.js:155 DEBUG [19:0:643]: QUEUE disposeEditor start: SIZE before: 1
log.js:155 DEBUG [19:0:644]: DISPOSE: EditorApp was disposed
log.js:155 DEBUG [19:0:644]: QUEUE disposeEditor end: SIZE after: 0
log.js:155 DEBUG [19:0:644]: Stopping queue...

[kaisalmen]

@martin-fleck-at I wasn't able to reproduce this behaviour locally it so far (also with break point).