CODEWITHSUNDEEP
javascriptjointjs
Tachyon80
Tachyon80

Reputation: 157

Properly Importing v3 of JointJS

When working with version 2.2.1 of JointJS I imported it like this:

import { default as joint } from "jointjs";

Now I'm working with version 3.0.2. "joint" from the line above is undefined. The import no longer works. I noticed in the release notes for JointJS 3.0.0:

Notable changes - full support for ES Modules

How should I import it now?

Upvotes: 1

Views: 952

Answers (1)

vt.
vt.

Reputation: 1428

there is no default import anymore, import * as joint from 'jointjs' works just fine. If need a smaller bundle you can cherry pick parts you actually need:

import { dia } from 'jointjs/src/core.mjs';
// import shapes you need 
import * as standard from 'jointjs/src/shapes/standard.mjs';

const graph = new dia.Graph([], { cellNamespace: { standard } });
new dia.Paper({
    cellViewNamespace: { standard },
    el: document.getElementById('paper'),
    width: 500, height: 500,
    model: graph
});

const rectangle = new standard.Rectangle().size(200, 200).position(100, 100).addTo(graph)

Please note you need to be careful with the cellViewNamespace for the dia.Paper and cellNamespace option for the dia.Graph in this setup. Otherwise, you could encounter the Uncaught Error: dia.ElementView: markup required error

runnig 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));

Upvotes: 3

Related Questions