Getting "Failed to execute 'removeChild' on 'Node" when using clientside callback

Dash Python
1

I have a multipage app which creates some dynamic components. Specifically, on one of my pages I have the following element:

html.Div(id="configuration-panel"),

Now, when nothing is in this div and when I navigate back from the page everything works as expected. However, when I use a clientside callback to “inject” a JSONEditor component and I navigate back I get the error from the title:

“Failed to execute ‘removeChild’ on ‘Node’: The node to be removed is not a child of this node.”

Here’s the callback in question:

app.clientside_callback(
        """
        function createJSONEditor(anything) {

            if (!anything) {
                return null;
            }

            const container = document.getElementById('configuration-panel');

            if (window.jsonEditor) {
                window.jsonEditor.destroy();
                window.jsonEditor = null;
            }

            window.jsonEditor = new JSONEditor(container, {});

            return null;
        }

        """,
        Output("configuration-panel", "children", allow_duplicate=True),
        # Use any component as Input
        prevent_initial_call=True,
    )

For the purposes of this example this will just “inject” an empty JSONEditor. I’ve read stuff online about wrapping this in another div to solve the issue but it doesn’t work for me.

(Here’s the CDN of the jsoneditor if anyone is willing to try this example out)

Any help in solving this issue or recommending a different approach is greatly appreciated.

2

I’ll suggest a couple of things with the warning that there’s guesswork here…

One thing is that it can be a bad idea to return null (or Python None) from a Dash callback. I’ve seen cases where this stops callbacks working, so maybe this is another one. Return an empty list, or an empty string as appropriate, or dash_clientside.no_update

Also, is it right to think that this line is supposed to attach the jsonEditor to configuration-panel?..
window.jsonEditor = new JSONEditor(container, {})

If it does, why also return a value for “configuration-panel”, “children” as an output from the callback? If this is unnecessary, I wonder if it possibly could also be damaging. In the most recent versions of Dash, you can have callback with no outputs.

1 Like