refactor(errors): show error when user drags uninitialized node #5014

packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx

@@ -74,8 +74,8 @@ function ResizeControl({
 
           if (node && node.expandParent && node.parentId) {
             const origin = node.origin ?? nodeOrigin;
-            const width = change.width ?? node.measured.width!;
-            const height = change.height ?? node.measured.height!;
+            const width = change.width ?? node.measured.width ?? 0;
+            const height = change.height ?? node.measured.height ?? 0;
 
             const child: ParentExpandChild = {
               id: node.id,

packages/react/src/store/index.ts

@@ -51,7 +51,7 @@ const createStore = ({
          * setNodes() is called exclusively in response to user actions:
          * - either when the `<ReactFlow nodes>` prop is updated in the controlled ReactFlow setup,
          * - or when the user calls something like `reactFlowInstance.setNodes()` in an uncontrolled ReactFlow setup.
-         * 
+         *
          * When this happens, we take the note objects passed by the user and extend them with fields
          * relevant for internal React Flow operations.
          */
@@ -161,9 +161,9 @@ const createStore = ({
             type: 'position',
             position: expandParent
               ? {
-                x: Math.max(0, dragItem.position.x),
-                y: Math.max(0, dragItem.position.y),
-              }
+                  x: Math.max(0, dragItem.position.x),
+                  y: Math.max(0, dragItem.position.y),
+                }
               : dragItem.position,
             dragging,
           };
@@ -174,8 +174,8 @@ const createStore = ({
               parentId: dragItem.parentId!,
               rect: {
                 ...dragItem.internals.positionAbsolute,
-                width: dragItem.measured.width!,
-                height: dragItem.measured.height!,
+                width: dragItem.measured.width ?? 0,
+                height: dragItem.measured.height ?? 0,
               },
             });
           }

packages/system/src/constants.ts

@@ -26,6 +26,8 @@ export const errorMessages = {
     `It seems that you haven't loaded the styles. Please import '@xyflow/${lib}/dist/style.css' or base.css to make sure everything is working properly.`,
   error014: () =>
     'useNodeConnections: No node ID found. Call useNodeConnections inside a custom Node or provide a node ID.',
+  error015: () =>
+    'It seems that you are trying to drag a node that is not initialized. Please use onNodesChange as explained in the docs.',
 };
 
 export const infiniteExtent: CoordinateExtent = [

packages/system/src/utils/graph.ts

@@ -428,10 +428,14 @@ export function calculateNodePosition<NodeType extends NodeBase>({
     ? clampPosition(nextPosition, extent, node.measured)
     : nextPosition;
 
+  if (node.measured.width === undefined || node.measured.height === undefined) {
+    onError?.('015', errorMessages['error015']());
+  }
+
   return {
     position: {
-      x: positionAbsolute.x - parentX + node.measured.width! * origin[0],
-      y: positionAbsolute.y - parentY + node.measured.height! * origin[1],
+      x: positionAbsolute.x - parentX + (node.measured.width ?? 0) * origin[0],
+      y: positionAbsolute.y - parentY + (node.measured.height ?? 0) * origin[1],
     },
     positionAbsolute,
   };