Error: Trying to set undefined property "0" on object: Node#1260

GoJS
1

I copy pasted the code for flowchart from the gojs flowchart documentation .i continuously get this error in my browser console and unable to use go js library. When i console.log() than i found error is from this ,but unable to figure out what is wrong so plz give me some suggestion . I am using it in reactjs.

 myDiagram.nodeTemplateMap.add("",  // the default category
      $(go.Node, "Spot",self.nodeStyle(),
        // the main object is a Panel that surrounds a TextBlock with a rectangular Shape
        $(go.Panel, "Auto",
          $(go.Shape, "Rectangle",
            { fill: "#00A9C9", stroke: null },
            new go.Binding("figure", "figure")),
          $(go.TextBlock,
            {
              font: "bold 11pt Helvetica, Arial, sans-serif",
              stroke: lightText,
              margin: 8,
              maxSize: new go.Size(160, NaN),
              wrap: go.TextBlock.WrapFit,
              editable: true
            },
            new go.Binding("text").makeTwoWay())
        ),
        // four named ports, one on each side:
        self.makePort("T", go.Spot.Top, false, true),
        self.makePort("L", go.Spot.Left, true, true),
        self.makePort("R", go.Spot.Right, true, true),
        self.makePort("B", go.Spot.Bottom, true, false)
      ));
2

I suspect the problem is inside nodeStyle().

This works just fine for me:

myDiagram.nodeTemplateMap.add("", // the default category
  $(go.Node, "Spot",//self.nodeStyle(),
  // the main object is a Panel that surrounds a TextBlock with a rectangular Shape
  $(go.Panel, "Auto",
  $(go.Shape, "Rectangle",
  { fill: "#00A9C9", stroke: null },
  new go.Binding("figure", "figure")),
  $(go.TextBlock,
  {
  font: "bold 11pt Helvetica, Arial, sans-serif",
  stroke: 'gray',
  margin: 8,
  maxSize: new go.Size(160, NaN),
  wrap: go.TextBlock.WrapFit,
  editable: true
  },
  new go.Binding("text").makeTwoWay())
  )//,
  // four named ports, one on each side:
  //self.makePort("T", go.Spot.Top, false, true),
  //self.makePort("L", go.Spot.Left, true, true),
  //self.makePort("R", go.Spot.Right, true, true),
  //self.makePort("B", go.Spot.Bottom, true, false)
));

But I had to comment out or change the things I didn’t have.

3

this is my nodeStyle() function
nodeStyle() {

  return [
   
    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
    {
      // the Node.location is at the center of each node
      locationSpot: go.Spot.Center,
      //isShadowed: true,
      //shadowColor: "#888",
      // handle mouse enter/leave events to show/hide the ports
      mouseEnter: function (e, obj) { showPorts(obj.part, true); },
      mouseLeave: function (e, obj) { showPorts(obj.part, false); }
    }
  ];

}

4

I don’t get any such error. Can you reproduce this issue for me, perhaps on a codepen?

You can fork this to start.

5

I think i got the solution for this issue when i changed the the variable name from “$” to “$$” it is solved ,I think error was $ as it is too used in jquery