Getting error dia.ElementView: markup required from graph.fromJSON(json) - json

Question

While doing one of my assignment where I want to draw diagram form json with help of rappidJS/JointJS. I was referring to below link
https://resources.jointjs.com/tutorial/serialization
I am getting below error
dia.ElementView: markup required
The json I am using to populate is
{
"cells": [{
"type": "standard.Rectangle",
"position": {
"x": 70,
"y": 70
},
"size": {
"width": 70,
"height": 70
},
"angle": 0,
"id": "79e30352-ad4f-417a-807a-0427d605a9f4",
"z": 1
}]
}
and the graph and paper code are as follow
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
width: $('.paper-container').width(),
height: $('.paper-container').height(),
gridSize: 10,
drawGrid: true,
model: graph,
interactive: {linkMove: false},
defaultLink: new joint.dia.Link({
attrs: { '.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z' }}
}),
async: true
});
and the error I am getting is
Uncaught Error: dia.ElementView: markup required
at child.renderMarkup (rappid.min.js:14)
at child.render (rappid.min.js:14)
at child.e.render (rappid.min.js:14)
at child.confirmUpdate (rappid.min.js:14)
at child.updateView (rappid.min.js:14)
at child.updateViewsBatch (rappid.min.js:14)
at child.updateViewsAsync (rappid.min.js:14)
I am using Rappid 3.0 version here.

Answer 1

Make sure you have the cellNamespace of the graph set on creation and also have the
cellViewNamespace of the paper set.
const graph = new joint.dia.Graph({}, {cellNamespace: joint.shape});
const paper = new joint.dia.Paper({model: graph, cellViewNamespace: joint.shapes});
After that, make sure that all custom element extends are on the joint.shape object. So if you have a custom element defined like so:
const NewElement = joint.dia.Element.define("node.NewElement", {size: {width:70,height: 70},... });
Then ensure that the node.NewElement element is on the joint.shapes object like this.
joint.shapes.node = {}; joint.shapes.node.NewElement = NewElement;