React Flow (@xyflow/react v12)

Reference for setting up and correctly using React Flow in a Vite/ESM environment. Covers the non-obvious gotchas that cause invisible nodes, broken layouts, and React warnings.

Setup checklist

yarn add @xyflow/react dagre

Three imports required — all three, every time:

import { ReactFlow, ReactFlowProvider, Background, Controls, ... } from "@xyflow/react";
import "@xyflow/react/dist/style.css";   // ← mandatory; nodes are invisible without it
import dagre from "dagre";               // ← ESM static import; never require()

style.css contains .react-flow__node { position: absolute } and the handle/controls rules. Without it every node collapses to zero size — the Background dots, Panel, and attribution still render, making it look like a partial load rather than a missing import.