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)
https://cdnjs.com/libraries/jsoneditor
Any help in solving this issue or recommending a different approach is greatly appreciated.