Question: TS2322: Type 'Element' is not assignable to type 'VNode'.

[Robert Richter]

I am using snabbdom within Sprotty (version 0.10.0-next.aa102b0), which uses snabbdom 3.1.0. Every time I want to declare a new graphical element using JSX, I get the error:

error TS2322: Type 'Element' is not assignable to type 'VNode'.

Even a simple example like this

const node: VNode = (
            <div>
                <span>I was created with JSX</span>
            </div>
        );

results in the error message above.

My code looks like this:

/** @jsx svg */
import { svg } from "sprotty";
import { jsx, VNode } from 'snabbdom';
import {injectable} from "inversify";
...

@injectable()
export class PolylineClosedArrowEdgeView extends PolylineEdgeView {

    protected renderAdditionals(edge: SEdge, segments: Point[], context: RenderingContext): VNode[] {
        return [
            (
                <path class-sprotty-edge-arrow={true} d="M 6,-3 L 0,0 L 6,3 Z" />
            )
        ]
    }
}

It is written in an .tsx file and my .tsconfig is configured as adviced in the README (https://github.com/snabbdom/snabbdom#typescript).

[Jan van Brügge]

The @jsx pragma at the top overrides the config in .tsconfig. You are not using the jsx function from snabbdom but from sprotty. So the return type of all JSX elements is whatever the sprotty jsx function returns. Looks like a bug in sprotty