I've followed the getting started documentation to get react-diagrams up and running on my fresh Blitz app (which is based on NextJS). For every problems I solve I seem to get a new one, so I though I'd check if anyone here have successfully gotten this component up and running in their Next based app and happen to have a working demo and/or tutorial on the matter.
The current setup is this:
// File: MyDiagram.tsx
import createEngine, {
DefaultLinkModel,
DefaultNodeModel,
DiagramModel,
} from "@projectstorm/react-diagrams"
import { CanvasWidget } from "@projectstorm/react-canvas-core"
export const MyDiagram = () => {
const engine = createEngine()
const node1 = new DefaultNodeModel({
name: "Node 1",
color: "rgb(0,192,255)",
})
node1.setPosition(100, 100)
let port1 = node1.addOutPort("Out")
const node2 = new DefaultNodeModel({
name: "Node 1",
color: "rgb(0,192,255)",
})
node2.setPosition(100, 100)
let port2 = node2.addOutPort("Out")
const link = port1.link<DefaultLinkModel>(port2)
link.addLabel("Hello World!")
const model = new DiagramModel()
model.addAll(node1, node2, link)
engine.setModel(model)
return <CanvasWidget engine={engine} />
}
export default MyDiagram
In the component in which I'd like to display the diagram, I have this:
So there seems to be some mismatch between react-diagrams an Next-based applications. Are there any documentation out there on how to get these to to play together?
I've followed the getting started documentation to get react-diagrams up and running on my fresh Blitz app (which is based on NextJS). For every problems I solve I seem to get a new one, so I though I'd check if anyone here have successfully gotten this component up and running in their Next based app and happen to have a working demo and/or tutorial on the matter.
The current setup is this:
In the component in which I'd like to display the diagram, I have this:
This yields the infamous
error - ReferenceError: self is not defined
, so I replace the above import-statement with this:This causes the app (running in the browser) filling up with errors:
By the way, this dependency is installed:
So there seems to be some mismatch between react-diagrams an Next-based applications. Are there any documentation out there on how to get these to to play together?