Sketch widget in Expand breaks React DOM lifecycle (ArcGIS JS API + React)

Med-Karim-Rouissi — Sat, 31 Jan 2026 01:35:07 GMT

Hello everyone,

I am working with ArcGIS API for JavaScript 4.34 in a React + Vite (TypeScript) project.

I was able without any issue to:

initialize a MapView,
add a GraphicsLayer,
display the Sketch widget directly on the map.

In order to better manage screen space, I then tried to place the Sketch widget inside an Expand widget.
This is where the difficulties started.

Issue encountered

Most of the time, the Expand appears empty
After several attempts, I managed to make the Sketch widget appear inside the Expand
However, this then leads to DOM-related errors on the React side, such as:

Uncaught 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.

or:

Uncaught DOMException: Node.insertBefore: Child to insert before is not a child of this node React 32 performWorkUntilDeadline scheduler.development.js:45 react-dom_client.js:9714:50

These errors usually occur:

after a React re-render,
or during the mount / unmount lifecycle of the Sketch widget,
even though the widget initially appears to work correctly inside the Expand.

Technical context

React 19.0.0
Vite 7.3.0
TypeScript
ArcGIS JS API 4.34
Usage of useEffect, useRef
Sketch widget instantiated using the container property

It seems I am facing a conflict between ArcGIS’ imperative DOM management and React’s virtual DOM, especially when the widget is hosted inside an Expand.

Question

Is there:

an officially recommended Esri pattern to properly integrate the Sketch widget inside an Expand in a React environment?
a known limitation or documented constraint regarding Expand + React?
a best practice to avoid these insertBefore errors in this specific scenario?

Here is the relevant code:

// Widget Sketch useEffect(() => { const view = viewRef.current; const panel = stylerPanelRef.current; const layer = sketchLayerRef.current; if (!view || !panel || !layer) return; // créer le container Sketch const sketchContainer = document.createElement("div"); sketchContainer.className = "w-full h-auto border border-slate-300 dark:border-slate-700 rounded-md mb-2"; // point d’ancrage STABLE géré par React (le bouton) const clearButton = panel.querySelector("button"); if (clearButton && clearButton.parentNode === panel) { // solution StackOverflow : insertBefore(parent, nextSibling) panel.insertBefore(sketchContainer, clearButton); } else { // fallback ultra-sécurisé panel.appendChild(sketchContainer); } // init Sketch const sketch = new Sketch({ view, layer, container: sketchContainer, creationMode: "single", visibleElements: { createTools: { point: false, polyline: true, polygon: true, rectangle: true, circle: true, }, selectionTools: { "lasso-selection": true, "rectangle-selection": true, }, settingsMenu: true, }, }); const createHandle = sketch.on("create", (event) => { if (event.state === "complete" && event.graphic?.geometry) { selectBySketchGeometry(event.graphic.geometry); } }); sketchWidgetRef.current = sketch; return () => { createHandle.remove(); sketch.destroy(); sketchWidgetRef.current = null; // nettoyage DOM sécurisé if (panel.contains(sketchContainer)) { panel.removeChild(sketchContainer); } }; }, [selectBySketchGeometry]);

JSX:

{/* Styler Panel (utilisé par le widget Expand ArcGIS) */} <div ref={stylerPanelRef} className="p-3 space-y-2 text-sm bg-white dark:bg-slate-800 h-auto"> <h3 className="font-bold text-slate-700 dark:text-slate-200">Sketch Styler</h3> {/* Le conteneur Sketch est ajouté dynamiquement via JavaScript */} <button type="button" className="px-3 py-1.5 text-sm font-medium text-white transition-colors bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-slate-800" onClick={() => sketchLayerRef.current?.removeAll()} > Clear Sketches </button> </div>

Thank you in advance for your help and feedback.

topic Sketch widget in Expand breaks React DOM lifecycle (ArcGIS JS API + React) in ArcGIS JavaScript Maps SDK Questions

Sketch widget in Expand breaks React DOM lifecycle (ArcGIS JS API + React)

Issue encountered

Technical context

Question