Well I just wish to try to render a “blank canvas” using jointjs; however nothing seems to be rendered at all:

'use client'

import {useEffect, useRef} from "react";
import {dia, shapes} from "@joint/core";

class Node extends dia.Element {
  defaults() {
    return {
      ...super.defaults,
      type: "Node",
      //...
    };
  }
  //...
}

export const Paper = () => {
  const paperEl = useRef(null);
  const graph = useRef<any>();
  const paper = useRef<any>();

  useEffect(() => {
    const cellNamespace = {
      Node,
      //...
    };

    graph.current = new dia.Graph({}, { cellNamespace });
    paper.current = new dia.Paper({
      model: graph.current,
      el: paperEl.current,
      cellViewNamespace: cellNamespace,
      background: { color: '#FFFFFF' },
      width: 300,
      height: 300,
    });

    return () => {
      paper.current.remove();
    };
  }, []);

  return (<div>blah
    <div ref={paperEl} />
  </div>);
}

And it’s just rendered directly in “page.tsx” from an empty nextjs application:

export default function Home() {
    return (
        <main className={styles.main}>
            <Paper/>
        </main>
    );
}

I expect an empty (white) 300*300 paper to show up “somehwere”.

However when I look at the dom the whole div is removed, if I remove the cleanup method paper.current.remove() it does work.. However that would mean no cleanup happens if the component gets unmounted.

This is just example code from https://www.jointjs.com/react-diagrams

I feel this is due to the unmounting, and then improper remounting from the “double use effect in strict mode”. However why would this stop working? And how can I prevent that from breaking?