Layouting bug in react-flow-renderer v10

3.2k views Asked by At

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

0

There are 0 answers