React-diagrams: Unable to get sample code to work.

[damntourists]

I'm following examples on:
https://projectstorm.gitbook.io/react-diagrams/getting-started/using-the-library

First issue was installing @projectstorm/react-diagrams. I could not get any examples to run without npm install --save the following:

@emotion/core
@emotion/styled
@projectstorm/react-canvas-core
closest
mathjs
pathfinding

After installing those, I was able to start my react-app. Adding the following triggers an error:

    const engine = createEngine();

Error being:
TypeError: class constructors must be invoked with 'new'

It's expecting new createEngine(); but all example code and docs don't show use of new.

I'm curious if anyone else is experiencing this or if I perhaps installed this incorrectly or using this incorrectly?

Thanks

[Dizzienoo]

Had similar issues, did manage to get something "running" in the end but then none of the diagram would render, all just invisible html elements that then wouldn't display. Can re-create what I tried tonight for more clarity

[damntourists]

That would be awesome!

[yaniving]

I had the same problem after I added the CSS I all worked fine.
The most important thing is to add height to your canvas.

this helped me

https://stackoverflow.com/questions/49513323/react-diagrams-invisible

[sibeshkar]

For anyone stuck at this stage where you need to install multiple additional dependencies, just use this command, and add CSS for the CanvasWidget element:

npm install --save @emotion/core @emotion/styled @projectstorm/react-canvas-core closest mathjs pathfinding dagre paths-js resize-observer-polyfill

[alexandrudanpop]

Could we have those deps installed as peer dependencies of maybe projectstorm/react-canvas-core? Or the other packages that will use them?

I think this library is really great and it would be cool to have the out of the box experience after adding the main package.