feat(react): add warning when styles not loaded #4047

packages/react/src/container/GraphView/index.tsx

@@ -9,6 +9,7 @@ import { useViewportSync } from '../../hooks/useViewportSync';
 import { ConnectionLineWrapper } from '../../components/ConnectionLine';
 import { useNodeOrEdgeTypesWarning } from './useNodeOrEdgeTypesWarning';
 import type { Edge, Node, ReactFlowProps } from '../../types';
+import { useStylesLoadedWarning } from './useStylesLoadedWarning';
 
 export type GraphViewProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> = Omit<
   ReactFlowProps<NodeType, EdgeType>,
@@ -104,6 +105,7 @@ function GraphViewComponent<NodeType extends Node = Node, EdgeType extends Edge
 }: GraphViewProps<NodeType, EdgeType>) {
   useNodeOrEdgeTypesWarning(nodeTypes);
   useNodeOrEdgeTypesWarning(edgeTypes);
+  useStylesLoadedWarning();
 
   useOnInitHandler(onInit);
   useViewportSync(viewport);

packages/react/src/container/GraphView/useStylesLoadedWarning.ts

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from 'react';
+import { errorMessages } from '@xyflow/system';
+
+import { useStoreApi } from '../../hooks/useStore';
+
+export function useStylesLoadedWarning() {
+  const store = useStoreApi();
+  const checked = useRef(false);
+
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'development') {
+      if (!checked.current) {
+        const pane = document.querySelector('.react-flow__pane');
+
+        if (pane && !(window.getComputedStyle(pane).zIndex === '1')) {
+          store.getState().onError?.('013', errorMessages['error013']('react'));
+        }
+
+        checked.current = true;
+      }
+    }
+  }, []);
+}