Common Errors

This guide contains warnings and errors that can occur when using Svelte Flow. We are also adding common questions and pitfalls that we collect from our Discord Server , Github Issues  and Github Discussions .

Warning: Could not find a Svelte Flow context.

This usually happens when: you are trying to access the internal Svelte Flow state outside of the Svelte Flow context.

Solution

Wrap your component with a <SvelteFlowProvider /> or move the code that is accessing the state inside a child component rendered inside your Svelte Flow instance.

<script>
  import { SvelteFlow, useSvelteFlow } from '@xyflow/svelte';
  import '@xyflow/svelte/dist/style.css';
 
  // cannot access the state here — no SvelteFlow context exists yet
  const { getZoom } = useSvelteFlow();
 
  let nodes = $state([]);
  let edges = $state([]);
</script>
 
<SvelteFlow {nodes} {edges} />

Move any useSvelteFlow calls into a child component that is rendered inside <SvelteFlow> or <SvelteFlowProvider>:

<script>
  import { SvelteFlow } from '@xyflow/svelte';
  import '@xyflow/svelte/dist/style.css';
  import FlowControls from './FlowControls.svelte';
 
  let nodes = $state([]);
  let edges = $state([]);
</script>
 
<SvelteFlow {nodes} {edges}>
  <FlowControls />
</SvelteFlow>

<script>
  import { useSvelteFlow } from '@xyflow/svelte';
 
  // works because this component is a child of <SvelteFlow>
  const { getZoom } = useSvelteFlow();
</script>

<script>
  import { SvelteFlow, useSvelteFlow } from '@xyflow/svelte';
  import '@xyflow/svelte/dist/style.css';
 
  // cannot access the state here — no SvelteFlow context exists yet
  const { getZoom } = useSvelteFlow();
 
  let nodes = $state([]);
  let edges = $state([]);
</script>
 
<SvelteFlow {nodes} {edges} />

<script>
  import { SvelteFlowProvider } from '@xyflow/svelte';
  import App from './App.svelte';
</script>
 
<SvelteFlowProvider>
  <App />
</SvelteFlowProvider>

It looks like you have created a new nodeTypes or edgeTypes object.

You don’t have to dynamically update nodeTypes and edgeTypes and you can simply create the object once initially.

<script>
  import { SvelteFlow } from '@xyflow/svelte';
  import '@xyflow/svelte/dist/style.css';
  import MyCustomNode from './MyCustomNode.svelte';
 
  // Just create the object once
  const nodeTypes = { myCustomNode: MyCustomNode };
</script>
 
<SvelteFlow {nodeTypes} />

Node type not found. Using fallback type “default”.

This usually happens when you specify a custom node type for one of your nodes but do not pass the correct nodeTypes prop to <SvelteFlow>. The string for the type property of your node needs to be exactly the same as the key in the nodeTypes object.

<script>
  import { SvelteFlow } from '@xyflow/svelte';
  import '@xyflow/svelte/dist/style.css';
  import MyCustomNode from './MyCustomNode.svelte';
 
  const nodes = [
    {
      id: 'mycustomnode',
      type: 'custom',
      // ...
    },
  ];
</script>
 
<!-- nodeTypes prop is missing, so Svelte Flow cannot find the custom node component -->
<SvelteFlow {nodes} />

<script>
  import { SvelteFlow } from '@xyflow/svelte';
  import '@xyflow/svelte/dist/style.css';
 
  import MyCustomNode from './MyCustomNode.svelte';
 
  const nodes = [
    {
      id: 'mycustomnode',
      type: 'custom',
      // ...
    },
  ];
 
  const nodeTypes = {
    Custom: MyCustomNode,
  };
 
</script>
 
<!-- node.type and key in nodeTypes object are not exactly the same (capitalized) -->
<SvelteFlow {nodes} {nodeTypes} />

<script>
  import { SvelteFlow } from '@xyflow/svelte';
  import '@xyflow/svelte/dist/style.css';\
 
  import MyCustomNode from './MyCustomNode.svelte';
 
  const nodes = [
    {
      id: 'mycustomnode',
      type: 'custom',
      // ...
    },
  ];
 
  const nodeTypes = {
    custom: MyCustomNode,
  };
</script>
 
<SvelteFlow {nodes} {nodeTypes} />

The Svelte Flow parent container needs a width and a height to render the graph.

Under the hood, Svelte Flow measures the parent DOM element to adjust the renderer. If you try to render Svelte Flow in a regular div without a height, we cannot display the graph. If you encounter this warning, you need to make sure that your wrapper component has some CSS attached to it so that it gets a fixed height or inherits the height of its parent.

<script>
  import { SvelteFlow } from '@xyflow/svelte';
  import '@xyflow/svelte/dist/style.css';
</script>
 
<div>
  <SvelteFlow />
</div>

<script>
  import { SvelteFlow } from '@xyflow/svelte';
  import '@xyflow/svelte/dist/style.css';
</script>
 
<div style:height="100vh" style:width="100vw">
  <SvelteFlow />
</div>

Only child nodes can use a parent extent.

This warning appears when you are trying to add the extent option to a node that does not have a parent node. Depending on what you are trying to do, you can remove the extent option or specify a parentId.

<script>
  import { SvelteFlow } from '@xyflow/svelte';
  import '@xyflow/svelte/dist/style.css';
 
  const nodes = [
    {
      id: 'mycustomnode',
      extent: 'parent',
      // ...
    },
  ];
</script>
 
<SvelteFlow {nodes} />

<script>
  import { SvelteFlow } from '@xyflow/svelte';
  import '@xyflow/svelte/dist/style.css';
 
  const nodes = [
    {
      id: 'mycustomnode',
      parentId: 'someothernode',
      extent: 'parent',
      // ...
    },
  ];
</script>
 
<SvelteFlow {nodes} />

Can’t create edge. An edge needs a source and a target.

This happens when you do not pass a source and a target option to the edge object. Without the source and target, the edge cannot be rendered.

<script>
  import { SvelteFlow } from '@xyflow/svelte';
  import '@xyflow/svelte/dist/style.css';
 
  const nodes = [
    /* ... */
  ];
 
  const edges = [
    {
      id: 'some-id',
    },
  ];
</script>
 
<SvelteFlow {nodes} {edges} />

<script>
  import { SvelteFlow } from '@xyflow/svelte';
  import '@xyflow/svelte/dist/style.css';
 
  const nodes = [
    /* ... */
  ];
 
  const edges = [
    {
      id: 'some-id',
      source: '1',
      target: '2',
    },
  ];
</script>
 
<SvelteFlow {nodes} {edges} />

The old edge with id=“some-id” does not exist.

This can happen when you are trying to reconnect an edge but the edge you want to update is already removed from the state. This is a very rare case. Please see the Reconnect Edge example for implementation details.

Couldn’t create edge for source/target handle id: “some-id”; edge id: “some-id”.

This can happen if you are working with multiple handles and a handle is not found by its id property or if you haven’t updated the node internals after adding or removing handles programmatically.

Marker type doesn’t exist.

This warning occurs when you are trying to specify a marker type that is not built into Svelte Flow. The existing marker types are documented here.

Handle: No node id found.

This warning occurs when you try to use a <Handle /> component outside of a custom node component.

Edge type ... not found. Using fallback type “default”.

This warning occurs when you specify a custom edge type for one of your edges but do not pass the correct edgeTypes prop to <SvelteFlow>. You can learn more about custom edges in the custom edge guide.

Node with id ... does not exist, it may have been removed.

This can happen when a node is deleted before the “onNodeClick” handler is called.

As the warning says, this can happen when you are trying to access a node that has already been removed from the state.

It seems that you haven’t loaded the styles.

Please import @xyflow/svelte/dist/style.css or base.css to make sure everything is working properly.

This warning appears when you haven’t imported the Svelte Flow stylesheet. The styles are necessary for the flow to be displayed properly.

useNodeConnections: No node ID found. Call useNodeConnections inside a custom node or provide a node ID.

useNodeConnections is a hook that allows you to get the connections of a node. This warning appears when you are trying to use the useNodeConnections hook outside of a custom node component.

Mouse events aren’t working consistently when my nodes contain a <canvas /> element.

If you’re using a <canvas /> element inside your custom node, you might run into problems with seemingly incorrect coordinates in mouse events from the canvas.

Svelte Flow uses CSS transforms to scale nodes as you zoom in and out. However, from the DOM’s perspective, the element is still the same size. This can cause problems if you have event listeners that want to calculate the mouse position relative to the canvas element.

To remedy this in event handlers you control, you can scale your computed relative position by 1 / zoom where zoom is the current zoom level of the flow. To get the current zoom level, you can use the getZoom method from the useSvelteFlow hook.

Edges are not displaying.

If your edges are not displaying in Svelte Flow, this might be due to one of the following reasons:

• You have not imported the Svelte Flow stylesheet. If you haven’t imported it, you can import it like import '@xyflow/svelte/dist/style.css';.
• If you have replaced your default nodes with a custom node, check if that custom node has appropriate source/target handles in the custom node component. An edge cannot be made without a handle.
• If you use an external styling library like Tailwind, ensure it doesn’t override the edge styles. For example, sometimes styling libraries override the .svelte-flow__edges SVG selector with overflow: hidden, which hides the edges.
• If you are using an async operation like a request to the backend, make sure to call the updateNodeInternals function from the useUpdateNodeInternals hook after the async operation so Svelte Flow updates the handle position internally.

Edges are not displaying correctly.

If your edges are not rendering as they should, this could be due to one of the following reasons:

• If you want to hide your handles, do not use display: none to hide them. Use either opacity: 0 or visibility: hidden.
• If edges are not connected to the correct handle, check if you have added more than one handle of the same type (source or target) in your custom node component. If that is the case, assign IDs to them. Multiple handles of the same kind on a node need to have distinguishable IDs so that Svelte Flow knows which handle an edge corresponds to.
• If you are changing the position of the handles (via reordering, etc.), make sure to call the updateNodeInternals function from the useSvelteFlow hook after so Svelte Flow knows to update the handle position internally.
• If you are using a custom edge and want your edge to go from the source handle to a target handle, make sure to correctly pass the sourceX, sourceY, targetX, and targetY props you get from the custom edge component in the edge path creation function (e.g., getBezierPath, etc.). sourceX, sourceY and targetX, targetY represent the x, y coordinates for the source and target handle, respectively.
• If the custom edge from the source or target side is not going towards the handle as expected (entering or exiting from a handle at a weird angle), make sure to pass the sourcePosition and targetPosition props you get from the custom edge component in the edge path creation function (e.g., getBezierPath). Passing the source/target handle position in the path creation function is necessary for the edge to start or end properly at a handle.