Error: Type 'Element' is missing the following props from type 'VNode': sel, data, ...

[glsp-bot]

My code is similar to Workflow Example ('return graph;' reports the error):

import { RenderingContext, RectangularNodeView } from '@eclipse-glsp/client';
import { injectable } from 'inversify';
import * as snabbdom from 'snabbdom-jsx';
import { VNode } from 'snabbdom/vnode';

import { ComponentNode } from './mvp-af3-glsp-component-diagram-nodes';
const JSX = { createElement: snabbdom.svg }; // see tsconfig.json compiler options

@Injectable()
export class ComponentNodeView extends RectangularNodeView {
render(node: ComponentNode, context: RenderingContext): VNode {
const graph =
<rect class-sprotty-node={true} class-forkOrJoin={true}
class-mouseover={node.hoverFeedback} class-selected={node.selected}
width={10} height={Math.max(50, node.bounds.height)}>
;
return graph;
}
}

Seems like a setup problem to me. tsconfig.json contains in particular compiler options:
'jsx': 'react',
'reactNamespace': 'JSX',
'skipLibCheck': true,
'esModuleInterop': true,
'allowSyntheticDefaultImports': true

Maybe a PRO can help me out here.

original thread by hoelzl-florian

[tortmayr]

Hi, at first glance your configuration/setup looks fine to me. The error indicates that const graph = <g ... is implictly typed with Element instead of VNode. However, I'm not sure why this is happening. I have some follow up questions:

• What version of @eclipse-glsp/client are you using?

• What typscript version are you using?

• Which operating system are you using?

[glsp-bot]

[hoelzl-florian]

I played around a lot today with version of my dependencies, but to no success.
E.g. I replaced 'reactNamespace' with 'jsxFactory', since I am using Typescript '4.3.5'
eclipse-glsp/client is on version '0.9.0-rc-01' and my OS is Ubuntu Linux.

My current workaround is an explicit conversion function:
private convertVNode(e : JSX.Element) : VNode {
return {
...e,
sel : undefined,
data : undefined,
children : undefined,
elm : undefined,
text : undefined,
key : undefined,
} as VNode;
}
Lets see if this brings other problems down the road. THX Florian