Description

I'm developing a front-end for an epidemic modeling framework I've created in Python, and I'm currently struggling with adding customized labels to my edges.

The error message:

Error: Invalid hook call... 
at resolveDispatcher (react.development.js:1476:1)
at useContext (react.development.js:1484:1)
at useStore (index.mjs:30:1)
at EdgeLabelRenderer (EdgeLabelRenderer.js:9:1)
at renderWithHooks (react-dom.development.js:15486:1)
at mountIndeterminateComponent (react-dom.development.js:20103:1)
at beginWork (react-dom.development.js:21626:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)

The custom edge type:

import React from 'react';
import {getBezierPath, BaseEdge, EdgeLabelRenderer} from 'reactflow';


const TransitionEdge = ({ id, data, ...props }) => {
    const [edgePath, labelX, labelY] = getBezierPath(props);
    return (
        <>
            <BaseEdge id={id} path={edgePath} />
            <EdgeLabelRenderer>
                <div
                    style={{
                        position: 'absolute',
                        transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
                        background: '#ffcc00',
                        padding: 10,
                        borderRadius: 5,
                        fontSize: 12,
                        fontWeight: 700,
                    }}
                    className="nodrag nopan"
                >
                    {data.param}
                </div>
            </EdgeLabelRenderer>
        </>
    );
};

export default TransitionEdge;

Passing it to ReactFlow (simplified)

import ReactFlow, { useNodesState, useEdgesState, addEdge } from 'react-flow-renderer';
import TransitionEdge from './edgeComponents/TransitionEdge';

    .
    .
    .

const edgeTypes = {
    transition: TransitionEdge,       
};

    .
    .
    .

    <ReactFlow
     nodes={nodes}
     edges={edges}
     onNodesChange={onNodesChange}
     onEdgesChange={onEdgesChange}
     onConnect={onConnect}
     onNodeClick={onNodeClick}
     edgeTypes={edgeTypes}                # Add edge types
                />

I made sure there aren't any mismatching versions of react and react-dom as the React documentation suggests. I've also looked at the react-flow documentation many times, but I wasn't able to notice any difference between mine and the provided example of a custom edge.

The relevant part of documentation:

https://reactflow.dev/examples/edges/edge-label-renderer

I realized that EdgeLabelRenderer is part of a new release, which is why the code broke (it's imported from 'reactflow' whereas the rest is from 'react-flow-renderer').

Updating also broke the app, the nodes and edges weren't rendering properly, but importing "reactflow/dist/styles.css" fixed that.