Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Broken type for nodeTypes

See original GitHub issue

Describe the Bug

I’m now getting this type error after updating to @types/react v18:

error TS2322: Type '(props: NodeProps<any>) => Element' is not assignable to type 'ReactNode'.

38 const NodeTypes: NodeTypes = { ComponentNode: ComponentNodeContainer };
                                                 ~~~~~~~~~~~~~~~~~~~~~~

and typescript seems to be right, the definition is:

// was also called "NodeTypesType"
export declare type NodeTypes = {
    [key: string]: ReactNode;
};

So typescript is right about the incompatibility, though I don’t understand why it started only now with @types/react 18

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

just take this example:

const CustomDefaultNode: FC = () => {
    return <div>hello I'm default node</div>;
};

const initialNodes: Node[] = [
    {
        id: "node-1",
        type: "textUpdater",
        position: { x: 0, y: 0 },
        data: { value: 123 },
    },
    {
        id: "node-2",
        type: "output",
        targetPosition: Position.Top,
        position: { x: 0, y: 200 },
        data: { label: "node 2" },
    },
    {
        id: "node-3",
        type: "output",
        targetPosition: Position.Top,
        position: { x: 200, y: 200 },
        data: { label: "node 3" },
    },
];

const initialEdges = [
    { id: "edge-1", source: "node-1", target: "node-2", sourceHandle: "a" },
    { id: "edge-1", source: "node-1", target: "node-3", sourceHandle: "b" },
];

const nodeTypes = {
    output: CustomDefaultNode, // <-- would stop error when using `<CustomDefaultNode/>`
};

function App() {
    return (
        <div className="App" style={{ width: 500, height: 500 }}>
            <ReactFlow
                nodeTypes={nodeTypes} // <--- type error here
                nodes={initialNodes}
                edges={initialEdges}
            />
        </div>
    );
}