Type 'Element' is missing the following properties from type 'VNode'

[rsoika]

I try t extend the minimal example and add some additional views like in the workflow-example. (I already have extended my server implementation.)

I try to take some code from the glsp-client/examples/workflow-glsp like the workflow-views.tsx fragment:

import {
    angleOfPoint,
    getSubType,
    Point,
    PolylineEdgeViewWithGapsOnIntersections,
    RenderingContext,
    SEdge,
    setAttr,
    toDegrees
} from '@eclipse-glsp/client';
import { injectable } from 'inversify';
import { VNode } from 'snabbdom';
import { findParentByFeature, ShapeView, svg } from 'sprotty';
import { Icon, isTaskNode } from './model';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const JSX = { createElement: svg };


@injectable()
export class IconView extends ShapeView {
    render(element: Icon, context: RenderingContext): VNode | undefined {
        const taskNode = findParentByFeature(element, isTaskNode);
        if (!taskNode || !this.isVisible(element, context)) {
            return undefined;
        }

        let icon;
        if (taskNode.type === 'task:manual') {
            // From codicons: https://github.com/microsoft/vscode-codicons/blob/main/src/icons/account.svg?short_path=8135b2d
            icon =
                // eslint-disable-next-line max-len
                'M16 7.992C16 3.58 12.416 0 8 0S0 3.58 0 7.992c0 2.43 1.104 4.62 2.832 6.09.016.016.032.016.032.032.144.112.288.224.448.336.08.048.144.111.224.175A7.98 7.98 0 0 0 8.016 16a7.98 7.98 0 0 0 4.48-1.375c.08-.048.144-.111.224-.16.144-.111.304-.223.448-.335.016-.016.032-.016.032-.032 1.696-1.487 2.8-3.676 2.8-6.106zm-8 7.001c-1.504 0-2.88-.48-4.016-1.279.016-.128.048-.255.08-.383a4.17 4.17 0 0 1 .416-.991c.176-.304.384-.576.64-.816.24-.24.528-.463.816-.639.304-.176.624-.304.976-.4A4.15 4.15 0 0 1 8 10.342a4.185 4.185 0 0 1 2.928 1.166c.368.368.656.8.864 1.295.112.288.192.592.24.911A7.03 7.03 0 0 1 8 14.993zm-2.448-7.4a2.49 2.49 0 0 1-.208-1.024c0-.351.064-.703.208-1.023.144-.32.336-.607.576-.847.24-.24.528-.431.848-.575.32-.144.672-.208 1.024-.208.368 0 .704.064 1.024.208.32.144.608.336.848.575.24.24.432.528.576.847.144.32.208.672.208 1.023 0 .368-.064.704-.208 1.023a2.84 2.84 0 0 1-.576.848 2.84 2.84 0 0 1-.848.575 2.715 2.715 0 0 1-2.064 0 2.84 2.84 0 0 1-.848-.575 2.526 2.526 0 0 1-.56-.848zm7.424 5.306c0-.032-.016-.048-.016-.08a5.22 5.22 0 0 0-.688-1.406 4.883 4.883 0 0 0-1.088-1.135 5.207 5.207 0 0 0-1.04-.608 2.82 2.82 0 0 0 .464-.383 4.2 4.2 0 0 0 .624-.784 3.624 3.624 0 0 0 .528-1.934 3.71 3.71 0 0 0-.288-1.47 3.799 3.799 0 0 0-.816-1.199 3.845 3.845 0 0 0-1.2-.8 3.72 3.72 0 0 0-1.472-.287 3.72 3.72 0 0 0-1.472.288 3.631 3.631 0 0 0-1.2.815 3.84 3.84 0 0 0-.8 1.199 3.71 3.71 0 0 0-.288 1.47c0 .352.048.688.144 1.007.096.336.224.64.4.927.16.288.384.544.624.784.144.144.304.271.48.383a5.12 5.12 0 0 0-1.04.624c-.416.32-.784.703-1.088 1.119a4.999 4.999 0 0 0-.688 1.406c-.016.032-.016.064-.016.08C1.776 11.636.992 9.91.992 7.992.992 4.14 4.144.991 8 .991s7.008 3.149 7.008 7.001a6.96 6.96 0 0 1-2.032 4.907z';
        } else {
            // From codicons: https://github.com/microsoft/vscode-codicons/blob/main/src/icons/gear.svg?short_path=8ee3ec4
            icon =
                // eslint-disable-next-line max-len
                'M9.1 4.4L8.6 2H7.4l-.5 2.4-.7.3-2-1.3-.9.8 1.3 2-.2.7-2.4.5v1.2l2.4.5.3.8-1.3 2 .8.8 2-1.3.8.3.4 2.3h1.2l.5-2.4.8-.3 2 1.3.8-.8-1.3-2 .3-.8 2.3-.4V7.4l-2.4-.5-.3-.8 1.3-2-.8-.8-2 1.3-.7-.2zM9.4 1l.5 2.4L12 2.1l2 2-1.4 2.1 2.4.4v2.8l-2.4.5L14 12l-2 2-2.1-1.4-.5 2.4H6.6l-.5-2.4L4 13.9l-2-2 1.4-2.1L1 9.4V6.6l2.4-.5L2.1 4l2-2 2.1 1.4.4-2.4h2.8zm.6 7c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zM8 9c.6 0 1-.4 1-1s-.4-1-1-1-1 .4-1 1 .4 1 1 1z';
        }

        const vnode = (
            <g>
                <path
                    transform={'scale(1.15),translate(0.75,0.75)'}
                    // From codicons: https://github.com/microsoft/vscode-codicons/blob/main/src/icons/terminal.svg?short_path=2ffc08e
                    // eslint-disable-next-line max-len
                    d={icon}
                />
                <rect class-icon-background x={0} y={0} width={25} height={20} />
                {context.renderChildren(element)}
            </g>
        );

        const subType = getSubType(element);
        if (subType) {
            setAttr(vnode, 'class', subType);
        }
        return vnode;
    }
}

But his will not compile and breaks with the following compiler error:

@imixs-bpmn/bpmn-glsp:   Type 'Element' is missing the following properties from type 'VNode': sel, data, children, elm, text
@imixs-bpmn/bpmn-glsp: src/workflow-views.tsx(73,9): error TS2322: Type 'Element' is not assignable to type 'VNode'.
@imixs-bpmn/bpmn-glsp: error Command failed with exit code 2.

I already tried a lot (switching and merging code from worklow-example 0.8.0/0.9.0). Also I analysed this pull request

But at the end I can't figure out what is wrong in my project setup. Can someone explain what this error meads an how I can solve this issue?

[planger]

I think I had this issue once before and was solved by making the following change in tsconfig.json of the package that defines the view via JSX (I applied this change directly to the minimal-example, as we should add it there too imho):
eclipse-glsp/glsp-examples#99

[rsoika]

Yes this did the trick. Thank you!
I hope that you and @tortmayr will merge the changes soon so that I can better understand the whole picture.

[dmm9]

Hi @rsoika, @planger, Is there any known solution for this already? I am currently getting this error - also in a glsp-client package - and adding "types" : [] in tsonfig.json doesn't solve it...

I was trying to add a dependency of another package in order to import a Command.ID. The only way out I found has been to remove the dependency and hard-code the command id string.

[tortmayr]

HI @dmm9,

this Problem typically occurs if you are trying to use GLSP/sprotty and react in the same project. Sprotty has a known issues when used
In combination with react (eclipse-sprotty/sprotty#178) and unfortunately there is no known fix for this yet.

The options which seems to work best is to keep GLSP/sprotty related code and react related code in separate packages.

In your case, I assume that the package you added as a dependency has a (transitive) dependency to react. That`s why you run into this issue.

[rsoika]

Hi @dmm9, do you have a sprotty dependency in your project? This should no longer be necessary. We no loner have that problem in our project. You can take a look into our actual implementation of a view. This code is based on glsp V2.x and we also do no longer use the "types" : [] workaround in tsonfig.json

[dmm9]

Thank you both for the swift replies. Then it seems that @theia/core - used for importing the Command interface - is the culprit here, because it brings the dependency on React.

Would you have any alternative idea how to open a second diagram when double-clicking on an element?

In package diagram-1:

// import { OpenCustomViewCommand } from 'diagram-common';

@injectable()
export class Diagram1MouseListener extends MouseListener {
    @inject(CommandService) protected readonly commandService!: CommandService;

    override doubleClick(target: GModelElement, event: MouseEvent): (Action | Promise<Action>)[] {
        // this.commandService.executeCommand(OpenCustomViewCommand.id, CustomDiagramLanguage2.diagramType, {  // ERROR
        this.commandService.executeCommand('open-custom-view', CustomDiagramLanguage2.diagramType, {  // OK
            requestedId: target.id
        });
        return [];
    }
}

In package diagram-common:

import { Command } from '@theia/core';

export const OpenCustomViewCommand: Command = {
    id: 'open-custom-view',
    label: 'Open Custom View'
};