Trouble getting react flow working in tanstack start | xyflow | Page 1

#

Hi, I trying to get reactflow working in tanstack start, and this is the exact code I'm running for the route:

import { createFileRoute } from '@tanstack/react-router';
import { useState, useCallback, type MouseEvent } from 'react';
import { ReactFlow, applyNodeChanges, applyEdgeChanges, addEdge, type Connection, type Edge, type EdgeChange, type Node, type NodeChange, MiniMap, Controls, Background } from '@xyflow/react';
import xyFlow from '@xyflow/react/dist/style.css?url';

export const Route = createFileRoute('/_authenticated/project/$projectId/test-task')({
  component: RouteComponent,
  head: () => ({
    links: [
      { rel: "stylesheet", href: xyFlow  },
    ],
  }),

});

const initialNodes: Node[] = [
  { id: 'n1', position: { x: 0, y: 0 }, data: { outerHeight: 100, outerWidth: 100, label: 'Node 1' } },
  { id: 'n2', position: { x: 0, y: 100 }, data: { label: 'Node 2' } },
];
const initialEdges: Edge[] = [{ id: 'n1-n2', source: 'n1', target: 'n2' }];

function RouteComponent() {
  const [nodes, setNodes] = useState<Node[]>(initialNodes);
  const [edges, setEdges] = useState<Edge[]>(initialEdges);

  const onNodesChange = useCallback(
    (changes: NodeChange[]) => setNodes((nodesSnapshot) => applyNodeChanges(changes, nodesSnapshot)),
    [],
  );
  const onEdgesChange = useCallback(
    (changes: EdgeChange[]) => setEdges((edgesSnapshot) => applyEdgeChanges(changes, edgesSnapshot)),
    [],
  );
  const onConnect = useCallback((params: Connection) => setEdges((edgesSnapshot) => addEdge(params, edgesSnapshot)), []);

  return (
    <div style={{ width: '100vw', height: '100vh'}}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        
        onConnect={onConnect}
        fitView
      >
        <Background />
        <Controls />
        <MiniMap />
      </ReactFlow>
    </div>
  );
}

and it doesn't seem to be working.

#

The editor itself is rendering but the nodes are not rendering. There are no errors in the server or the client console logs

#

this is what it looks liek

#Trouble getting react flow working in tanstack start