TypeError: vis_network__WEBPACK_IMPORTED_MODULE_3__.DataSet is not a constructor

Question

I am trying this reactjs. I am getting the following 'not a constructor error'

version used: "vis-network": "^7.4.2",

import { Network, DataSet } from "vis-network";

const NODES = new DataSet({});
NODES.add([
  {
    id: "1",
    label: "start",
    final: true,
    x: -184,
    y: -41
  },
  {
    id: "2",
    label: "Node 1",
    final: false,
    x: 11,
    y: -40
  }]);

Answer 1

This is how I resolved the issue. I changed the import statement

import { Network } from "vis-network/peer/esm/vis-network";
import { DataSet } from "vis-data/peer/esm/vis-data"

I'm going to post the answer found from https://github.com/visjs/vis-network/issues/588

vis-network bundles everything, many things multiple times. It throws these and other errors in many circumstances. Don't use it. It will be deprecated and removed eventually.

vis-network/standalone bundles everything (polyfills + Vis Data). If you use this you have to use the DataSet exported by this. The downside of this is that it works only on it's own, it will fail when used together with Vis Timeline etc.

vis-network/peer bundles polyfills only. You have to use DataSet from vis-data/peer. An advantage here is that it works together with Vis Timeline etc.

vis-network/esnext bundles nothing. You have to supply all dependencies yourself and use DataSet from vis-data/esnext. The advantage in this is that you can reuse polyfills and other dependencies from your app, reducing bundle size.