Merge branch 'chore/warnings' into refactor/react18

src/components/Attribution/index.tsx

@@ -10,7 +10,8 @@ type AttributionProps = {
 
 function Attribution({ proOptions, position = 'bottom-right' }: AttributionProps) {
   if (
-    (proOptions?.account === 'paid-sponsor' ||
+    (proOptions?.account === 'paid-pro' ||
+      proOptions?.account === 'paid-sponsor' ||
       proOptions?.account === 'paid-enterprise' ||
       proOptions?.account === 'paid-custom') &&
     proOptions?.hideAttribution

src/container/EdgeRenderer/MarkerSymbols.tsx

@@ -38,9 +38,13 @@ export function useMarkerSymbol(type: MarkerType) {
   const symbol = useMemo(() => {
     const symbolExists = MarkerSymbols.hasOwnProperty(type);
 
-    if (!symbolExists) {
+    if (process.env.NODE_ENV === 'development') {
-      console.warn(`marker type "${type}" doesn't exist.`);
+      if (!symbolExists) {
-      return () => null;
+        console.warn(
+          `[React Flow]: Marker type "${type}" doesn't exist. Help: https://reactflow.dev/error-decoder#900`
+        );
+        return () => null;
+      }
     }
 
     return MarkerSymbols[type];

src/container/EdgeRenderer/index.tsx

@@ -107,14 +107,20 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
               const sourcePosition = sourceHandle?.position || Position.Bottom;
               const targetPosition = targetHandle?.position || Position.Top;
 
-              if (!sourceHandle) {
+              if (process.env.NODE_ENV === 'development') {
-                console.warn(`couldn't create edge for source handle id: ${edge.sourceHandle}; edge id: ${edge.id}`);
+                if (!sourceHandle) {
-                return null;
+                  console.warn(
-              }
+                    `[React Flow]: Couldn't create edge for source handle id: ${edge.sourceHandle}; edge id: ${edge.id}. Help: https://reactflow.dev/error-decoder#800`
+                  );
+                  return null;
+                }
 
-              if (!targetHandle) {
+                if (!targetHandle) {
-                console.warn(`couldn't create edge for target handle id: ${edge.targetHandle}; edge id: ${edge.id}`);
+                  console.warn(
-                return null;
+                    `[React Flow]: Couldn't create edge for target handle id: ${edge.targetHandle}; edge id: ${edge.id}. Help: https://reactflow.dev/error-decoder#800`
+                  );
+                  return null;
+                }
               }
 
               const { sourceX, sourceY, targetX, targetY } = getEdgePositions(

src/container/NodeRenderer/index.tsx

@@ -70,8 +70,12 @@ const NodeRenderer = (props: NodeRendererProps) => {
       {nodes.map((node) => {
         const nodeType = node.type || 'default';
 
-        if (!props.nodeTypes[nodeType]) {
+        if (process.env.NODE_ENV === 'development') {
-          console.warn(`Node type "${nodeType}" not found. Using fallback type "default".`);
+          if (!props.nodeTypes[nodeType]) {
+            console.warn(
+              `[React Flow]: Node type "${nodeType}" not found. Using fallback type "default". Help: https://reactflow.dev/error-decoder#300`
+            );
+          }
         }
 
         const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default) as ComponentType<WrapNodeProps>;

src/container/ReactFlow/utils.ts

@@ -16,7 +16,7 @@ export function useNodeOrEdgeTypes(nodeOrEdgeTypes: any, createTypes: any): any
       const typeKeys = Object.keys(nodeOrEdgeTypes);
       if (shallow(typesKeysRef.current, typeKeys)) {
         console.warn(
-          "React Flow: It looks like that you created a new nodeTypes or edgeTypes object. If this wasn't on purpose please define the nodeTypes/edgeTypes outside of the component or memoize them."
+          "[React Flow]: It looks like you have created a new nodeTypes or edgeTypes object. If this wasn't on purpose please define the nodeTypes/edgeTypes outside of the component or memoize them. Help: https://reactflow.dev/error-decoder#200"
         );
       }
 

src/hooks/useResizeHandler.ts

@@ -16,8 +16,12 @@ function useResizeHandler(rendererNode: MutableRefObject<HTMLDivElement | null>)
 
       const size = getDimensions(rendererNode.current);
 
-      if (size.height === 0 || size.width === 0) {
+      if (process.env.NODE_ENV === 'development') {
-        console.warn('The React Flow parent container needs a width and a height to render the graph.');
+        if (size.height === 0 || size.width === 0) {
+          console.warn(
+            '[React Flow]: The React Flow parent container needs a width and a height to render the graph. Help: https://reactflow.dev/error-decoder#400'
+          );
+        }
       }
 
       store.setState({ width: size.width || 500, height: size.height || 500 });

src/store/utils.ts

@@ -141,7 +141,11 @@ export function createPositionChange({
               ]
             : currentExtent;
       } else {
-        console.warn('Only child nodes can use parent extent');
+        if (process.env.NODE_ENV === 'development') {
+          console.warn(
+            '[React Flow]: Only child nodes can use a parent extent. Help: https://reactflow.dev/error-decoder#500'
+          );
+        }
         currentExtent = nodeExtent;
       }
     }

src/utils/graph.ts

@@ -57,7 +57,11 @@ const connectionExists = (edge: Edge, edges: Edge[]) => {
 
 export const addEdge = (edgeParams: Edge | Connection, edges: Edge[]): Edge[] => {
   if (!edgeParams.source || !edgeParams.target) {
-    console.warn("Can't create edge. An edge needs a source and a target.");
+    if (process.env.NODE_ENV === 'development') {
+      console.warn(
+        "[React Flow]: Can't create edge. An edge needs a source and a target. Help: https://reactflow.dev/error-decoder#600"
+      );
+    }
     return edges;
   }
 
@@ -80,14 +84,22 @@ export const addEdge = (edgeParams: Edge | Connection, edges: Edge[]): Edge[] =>
 
 export const updateEdge = (oldEdge: Edge, newConnection: Connection, edges: Edge[]): Edge[] => {
   if (!newConnection.source || !newConnection.target) {
-    console.warn("Can't create new edge. An edge needs a source and a target.");
+    if (process.env.NODE_ENV === 'development') {
+      console.warn(
+        "[React Flow]: Can't create a new edge. An edge needs a source and a target. Help: https://reactflow.dev/error-decoder#600"
+      );
+    }
     return edges;
   }
 
   const foundEdge = edges.find((e) => e.id === oldEdge.id) as Edge;
 
   if (!foundEdge) {
-    console.warn(`The old edge with id=${oldEdge.id} does not exist.`);
+    if (process.env.NODE_ENV === 'development') {
+      console.warn(
+        `[React Flow]: The old edge with id=${oldEdge.id} does not exist. Help: https://reactflow.dev/error-decoder#700`
+      );
+    }
     return edges;
   }