NameSpace Issue in JointJS version 3

Question

I am trying to convert a legacy app from JointJS v2.2.1 to v3.0.2. I’m hitting an error others have found:

Uncaught Error: dia.ElementView: markup required. (joint.min.js:8)

A helpful person said: “Please note you need to be careful with the cellViewNamespace for the dia.Paper and cellNamespace option for the dia.Graph in this setup. Running this snippet is a quick check you've set up the namespaces correctly:

const cells = JSON.stringify(graph.toJSON());
graph.clear();
graph.fromJSON(JSON.parse(cells));

”

Can anyone offer additional help? I don’t know enough about JointJS to resolve this issue and I don’t really understand the code snippet.

Answer 1

I met a similar error saying 'markup required' just today when using jointjs with Vue. I followed the code and found that it is assuming 'joint' is present in global environment. So I add the following line in my code, and the error is gone:

import * as joint from 'jointjs'
window.joint = joint

Hopefully this helps.

Answer 2

If there is no joint variable in the global environment, you need to pass the shapes namespace explicitly to the graph (for models) and the paper (for views).

If you do not mind adding joint reference to the window object see @duanbw answer.

Built-in shapes

import { shapes, dia } from 'jointjs'

const graph = new dia.Graph({ /* attributes of the graph */ }, { cellNamespace: shapes });
const paper = new dia.Paper({ cellViewNamespace: shapes });

Custom shapes

If you define your own shapes do not forget to add it to the namespace as well (this also apply for the custom views).

const { standard, devs } = shapes;

// Custom Element Model
const MyRectangle = standard.Rectangle.define('myNamespace.Rectangle', {
  size: { width: 100, height: 100 },
  attrs: { body: { fill: 'red' }}
});

const graph = new dia.Graph({}, {
  cellNamespace: {
    // Optionally, cherry-pick namespaces/shapes you will use in your application
    standard,
    devs,
    myNamespace: { Rectangle: MyRectangle }
  }
});

const myRectangle = new MyRectangle();
myRectangle.addTo(graph);
const circle = new standard.Circle();
circle.addTo(graph);