refactor(node-renderer): use default type if type is invalid closes #2033

example/src/DragHandle/index.tsx

@@ -1,3 +1,4 @@
+import { MouseEvent } from 'react';
 import ReactFlow, { Node, Edge, useNodesState, useEdgesState } from 'react-flow-renderer';
 
 import DragHandleNode from './DragHandleNode';
@@ -17,13 +18,23 @@ const initialNodes: Node[] = [
   },
 ];
 
+const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
+
 const initialEdges: Edge[] = [];
 
 const DragHandleFlow = () => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges] = useEdgesState(initialEdges);
 
-  return <ReactFlow nodes={nodes} onNodesChange={onNodesChange} edges={edges} nodeTypes={nodeTypes} />;
+  return (
+    <ReactFlow
+      nodes={nodes}
+      onNodesChange={onNodesChange}
+      edges={edges}
+      nodeTypes={nodeTypes}
+      onNodeClick={onNodeClick}
+    />
+  );
 };
 
 export default DragHandleFlow;

src/container/NodeRenderer/index.tsx

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