Running react-diagrams in a NextJS based app doesn'w work

[kenneho]

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:

import MyDiagram from "app/items/components/MyDiagram"

export const SomeOtherComponent = () => {
   return (
    <div>
      <MyDiagram />
    </div>
 }

This yields the infamous error - ReferenceError: self is not defined, so I replace the above import-statement with this:

import dynamic from "next/dynamic"
const MyDiagram = dynamic(() => import("app/items/components/MyDiagram"), {
  ssr: false,
})

This causes the app (running in the browser) filling up with errors:

Cannot find module '@emotion/react'
Error: Cannot find module '@emotion/react' at webpackMissingModule (webpack-internal:///./node_modules/@emotion/styled/dist/emotion-
<snip>

By the way, this dependency is installed:

❯ npm list|grep @emotion/react
├── @emotion/[email protected]

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?

[rondorkerin]

https://github.com/projectstorm/react-diagrams/issues/851