NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

[bram2000]

Hi,

I'm getting an intermittent error NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node. but struggling to figure out the cause. I think it's something to do with the custom control because if I remove it, the error stops occurring. Unfortunately I the stack trace doesn't appear useful either.

Wondering if there was any steps that I could follow to debug further. Thanks!

`Unhandled Runtime Error
NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

Call Stack
insertBefore
webpack://_N_E/./node_modules/react-dom/cjs/react-dom.development.js (10290:18)
insertOrAppendPlacementNode
webpack://_N_E/./node_modules/react-dom/cjs/react-dom.development.js (21217:7)
insertOrAppendPlacementNode
webpack://_N_E/./node_modules/react-dom/cjs/react-dom.development.js (21225:7)
insertOrAppendPlacementNode
webpack://_N_E/./node_modules/react-dom/cjs/react-dom.development.js (21229:9)
insertOrAppendPlacementNode
webpack://_N_E/./node_modules/react-dom/cjs/react-dom.development.js (21225:7)
commitPlacement
webpack://_N_E/./node_modules/react-dom/cjs/react-dom.development.js (21178:5)
commitMutationEffects
webpack://_N_E/./node_modules/react-dom/cjs/react-dom.development.js (23368:11)
HTMLUnknownElement.callCallback
webpack://_N_E/./node_modules/react-dom/cjs/react-dom.development.js (3945:14)
HTMLUnknownElement.sentryWrapped
webpack://_N_E/./node_modules/@sentry/browser/esm/helpers.js (99:17)
Object.invokeGuardedCallbackDev
webpack://_N_E/./node_modules/react-dom/cjs/react-dom.development.js (3994:16)
invokeGuardedCallback
webpack://_N_E/./node_modules/react-dom/cjs/react-dom.development.js (4056:31)
commitRootImpl
webpack://_N_E/./node_modules/react-dom/cjs/react-dom.development.js (23116:9)
unstable_runWithPriority
webpack://_N_E/./node_modules/scheduler/cjs/scheduler.development.js (468:12)
runWithPriority$1
webpack://_N_E/./node_modules/react-dom/cjs/react-dom.development.js (11276:10)
commitRoot
webpack://_N_E/./node_modules/react-dom/cjs/react-dom.development.js (22985:3)
performSyncWorkOnRoot
webpack://_N_E/./node_modules/react-dom/cjs/react-dom.development.js (22324:3)
eval
webpack://_N_E/./node_modules/react-dom/cjs/react-dom.development.js (11327:26)
unstable_runWithPriority
webpack://_N_E/./node_modules/scheduler/cjs/scheduler.development.js (468:12)
runWithPriority$1
webpack://_N_E/./node_modules/react-dom/cjs/react-dom.development.js (11276:10)
flushSyncCallbackQueueImpl
webpack://_N_E/./node_modules/react-dom/cjs/react-dom.development.js (11322:9)
flushSyncCallbackQueue
webpack://_N_E/./node_modules/react-dom/cjs/react-dom.development.js (11309:3)
scheduleUpdateOnFiber
webpack://_N_E/./node_modules/react-dom/cjs/react-dom.development.js (21888:9)
dispatchAction
webpack://_N_E/./node_modules/react-dom/cjs/react-dom.development.js (16139:5)
handleStoreChange
webpack://_N_E/./node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js (188:9)
eval
webpack://_N_E/./node_modules/next/dist/shared/lib/loadable.js (231:28)
Set.forEach

LoadableSubscription._update
webpack://_N_E/./node_modules/next/dist/shared/lib/loadable.js (230:33)
eval
webpack://_N_E/./node_modules/next/dist/shared/lib/loadable.js (213:27)`

[daoik]

Did you manage to find a solution?

[chris-m92]

I haven't been able to find a solution to this nor has this come up and repeatable.

The most recent change helped to sort multiple maps in the page, but I'm not sure if that would fix this.

[Zarinia]

You shoud use div instead of <></> or <React.Fragment>

[bors-ltd]

I get almost the same error:

NotFoundError: Node.removeChild: The node to be removed is not a child of this node

when the map is re-rendered because the list of markers to display has updated.
My Control element just contains a Material button:

<Control ...>
  <Button ... />
</Control>

Edit: I found a closed issue with my error, but to be clear, my button doesn't hide the control on clicking, but open a modal for address searching (geocoding).
It actually happens in another part when my custom control is a slider to manipulate the map, nothing being hidden or removed.

[mdrayer]

@chris-m92 - here's a simple repeatable demo of the issue: https://codesandbox.io/p/sandbox/react-leaflet-custom-control-lzf3cl?file=%2Fsrc%2FApp.tsx. The custom control is the box at the top-right with "Hello" text inside it, very simple. When you toggle the "Show custom control" checkbox to unchecked from checked, then the Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. error appears.

I am aware of the workaround to toggle the display to the contents of the <Control> component:

<Control position="topright">
  {showControl && <div className="control-content">Hello</div>}
</Control>

but a better solution should be in place so we can dynamically display <Control>.