Tutorial not working

[johnsmithlon]

I am trying to follow:

https://projectstorm.gitbook.io/react-diagrams/getting-started/using-the-library

I created a new typescript react project using:

npx create-react-app my-app --template typescript

Then I put the code from the tutorial into index.tsx. i.e.

import createEngine, {
DefaultLinkModel,
DefaultNodeModel,
DiagramModel
} from '@projectstorm/react-diagrams';

import {
CanvasWidget
} from '@projectstorm/react-canvas-core';

// create an instance of the engine with all the defaults
const engine = createEngine();

// node 1
const node1 = new DefaultNodeModel({
name: 'Node 1',
color: 'rgb(0,192,255)',
});
node1.setPosition(100, 100);
let port1 = node1.addOutPort('Out');

// node 2
const node2 = new DefaultNodeModel({
name: 'Node 1',
color: 'rgb(0,192,255)',
});
node2.setPosition(100, 100);
let port2 = node2.addOutPort('Out');

// link them and add a label to the link
const link = port1.link(port2);
link.addLabel('Hello World!');

const model = new DiagramModel();
model.addAll(node1, node2, link);
engine.setModel(model);

This gives the following error:

TS2786: 'CanvasWidget' cannot be used as a JSX component.
Its instance type 'CanvasWidget' is not a valid JSX element.
Type 'CanvasWidget' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, and 2 more.
38 |
39 |

40 |

Can you suggest what I am doing wrong?

[LynchyC]

I don't see the use of CanvasWidget anywhere apart from the import statement.

I would recommend using the demo code as a basis and see if the problem still persists for you.