I just migrated to react-flow-renderer version 10 about 5 hours back (it launched around 10 hours ago). I am trying to arrange nodes on a graph with the help of dagre
library for layouting & Vite js as a build tool
However, I keep getting thrown the error - Uncaught SyntaxError: The requested module '/node_modules/.vite/react-flow-renderer.js?v=6f1c077c' does not provide an export named 'useEdgesState'
Here's a screenshot of my codebase & my package.json (where I'm using react-flow-renderer v10.0.2)
import React, { useCallback } from 'react';
import ReactFlow, { addEdge, useNodesState, useEdgesState, Edge, Node, Position, ConnectionLineType } from 'react-flow-renderer';
import dagre from 'dagre';
import { initialNodes, initialEdges } from '../../../nodes-edges';
import './layouting.css';
const dagreGraph = new dagre.graphlib.Graph();
dagreGraph.setDefaultEdgeLabel(() => ({}));
const nodeWidth = 172;
const nodeHeight = 36;
const getLayoutedElements = (nodes:Node[], edges:Edge[], direction = 'TB') => {
const isHorizontal = direction === 'LR';
dagreGraph.setGraph({ rankdir: direction });
nodes.forEach((node:Node) => {
dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
});
edges.forEach((edge:Edge) => {
dagreGraph.setEdge(edge.source, edge.target);
});
dagre.layout(dagreGraph);
nodes.forEach((node) => {
const nodeWithPosition = dagreGraph.node(node.id);
node.targetPosition = isHorizontal ? Position.Left : Position.Top;
node.sourcePosition = isHorizontal ? Position.Right : Position.Bottom;
// We are shifting the dagre node position (anchor=center center) to the top left
// so it matches the React Flow node anchor point (top left).
node.position = {
x: nodeWithPosition.x - nodeWidth / 2,
y: nodeWithPosition.y - nodeHeight / 2,
};
return node;
});
return { nodes, edges };
};
const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(
initialNodes,
initialEdges
);
const LayoutFlow = () => {
const [nodes, setNodes, onNodesChange] = useNodesState(layoutedNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(layoutedEdges);
const onConnect = useCallback(
(params) => setEdges((eds) => addEdge({ ...params, type: 'smoothstep', animated: true }, eds)),
[]
);
const onLayout = useCallback(
(direction) => {
const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(
nodes,
edges,
direction
);
setNodes([...layoutedNodes]);
setEdges([...layoutedEdges]);
},
[nodes, edges]
);
return (
<div className="layoutflow">
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
connectionLineType={ConnectionLineType.SmoothStep}
fitView
/>
<div className="controls">
<button onClick={() => onLayout('TB')}>vertical layout</button>
<button onClick={() => onLayout('LR')}>horizontal layout</button>
</div>
</div>
);
};
export default LayoutFlow;
{
"name": "app-frontend",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"@ant-design/icons": "^4.7.0",
"antd": "^4.19.2",
"dagre": "^0.8.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-flow-renderer": "^10.0.2"
},
"devDependencies": {
"@types/d3": "^7.1.0",
"@types/dagre": "^0.7.47",
"@types/react": "^17.0.33",
"@types/react-dom": "^17.0.10",
"@vitejs/plugin-react": "^1.0.7",
"eslint": "^8.11.0",
"husky": "^7.0.4",
"lint-staged": "^12.3.5",
"prettier": "^2.5.1",
"typescript": "^4.5.4",
"vite": "^2.8.0"
}
}
The docs I referred to, to achieve this are here - https://reactflow.dev/docs/examples/layouting/
Can someone please help debug this ? I have a feeling, Vite's module bundling is causing this error