Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Serialization error: markup required

See original GitHub issue

I am encountering an unexpected error while using JointJS in an Angular application. After I create graph, paper and a rectangle like in the following:

private graph: joint.dia.Graph;
private paper: joint.dia.Paper;

 ngOnInit() {
   this.graph = new joint.dia.Graph();
   this.paper = new joint.dia.Paper({
     el: this.paperElement.nativeElement,
     width: 1001,
     height: 801,
     model: this.graph,
     gridSize: 20,
     drawGrid: { name: "mesh" }
   let rect = new joint.shapes.standard.Rectangle();
   rect.position(50, 20);
   rect.resize(100, 40);
     body: {
       fill: "blue"
     label: {
       text: "abc",
       fill: "white"

I am trying to serialize the graph to JSON and load it again, like so

    let data = this.graph.toJSON();

But when i try to run the application, i get the following error:

Error: dia.ElementView: markup required

The serialized json looks like the following: {"cells":[{"type":"standard.Rectangle","position":{"x":50,"y":20},"size":{"width":100,"height":40},"angle":0,"id":"64a15c16-2145-4fcb-b838-5271d69d4fa7","z":1,"attrs":{"body":{"fill":"blue"},"label":{"fill":"white","text":"abc"}}}]}

Am i doing something wrong or is this a bug?

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:9 (5 by maintainers)

github_iconTop GitHub Comments

kumilinguscommented, Jul 8, 2019

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

const namespace = joint.shapes; // e.g. { standard: { Rectangle: RectangleElementClass }}
const graph = new joint.dia.Graph({ /* attributes of the graph */ }, { cellNamespace: namespace });
const paper = new joint.dia.Paper({ cellViewNamespace: namespace });
kumilinguscommented, May 29, 2020

@thomaspeugeot , the size of the resulting bundle.

// This would import all JointJS shapes.
// And there would be no way to import the graph only.
import * from 'src/dia/graph.mjs';
Read more comments on GitHub >

github_iconTop Results From Across the Web

Getting error dia.ElementView: markup required from graph ...
@Roman I am using requirejs where I have added all the required js files such as (Rappid, backbone , lodash etc) , Also...
Read more >
Cannot serialize a non-public type 'System.Activities ... - MSDN
Getting this runtime error when I am doing Serialization to copy the dragged UserControl onto canvas: "Cannot serialize a non-public type ...
Read more >
XSLT and XQuery Serialization 3.1 - W3C
A serialization error is said to occur in such an instance.] In some cases, a serializer is REQUIRED to signal such an error....
Read more >
Kafka - Avro - Value serialization error - The art of simplicity
The problem is that in the schema is specified that the Browser field should a value of type string. 'Null' is not a...
Read more >
JasperReports Serialization error with JRDataSource ... - Re
Objects - Error serializing object class ... Resource
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found