Merge pull request #4261 from xyflow/react/styles-loaded-warning

React/styles loaded warning

examples/react/src/examples/AddNodeOnEdgeDrop/index.tsx

@@ -12,7 +12,6 @@ import {
   Node,
   Edge,
 } from '@xyflow/react';
-import '@xyflow/react/dist/style.css';
 
 const initialNodes: Node[] = [
   {

examples/react/src/examples/Redux/index.tsx

@@ -1,5 +1,4 @@
 import { ReactFlow } from '@xyflow/react';
-import '@xyflow/react/dist/style.css';
 
 import { useDispatch, useSelector, Provider } from 'react-redux';
 

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;
+      }
+    }
+  }, []);
+}

packages/system/src/constants.ts

@@ -1,6 +1,5 @@
 import { CoordinateExtent, HandleType } from './types';
 
-// @todo: update URLs to xyflow
 export const errorMessages = {
   error001: () =>
     '[React Flow]: Seems like you have not used zustand provider as an ancestor. Help: https://reactflow.dev/error#001',
@@ -23,6 +22,8 @@ export const errorMessages = {
   error011: (edgeType: string) => `Edge type "${edgeType}" not found. Using fallback type "default".`,
   error012: (id: string) =>
     `Node with id "${id}" does not exist, it may have been removed. This can happen when a node is deleted before the "onNodeClick" handler is called.`,
+  error013: (lib: string = 'react') =>
+    `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.`,
 };
 
 export const infiniteExtent: CoordinateExtent = [