Unable to use a string as an argument to GraphObject.make

#1

So I have a diagram in my app, and I’m getting errors when I load into it in a a specific way. The error message is “Uncaught Error: Unable to use a string as an argument to GraphObject.make: workflow_diagram_canvas
at Object.k (gojs.js?eval:13)”

However, I know you can use a string as an argument to make. I suspect it’s something to do with a div being off or something, but I’ve had trouble debugging into gojs to see what exactly it’s unhappy about.

I have checked, and as far as I can tell, the div is there, and the string I’m giving it to find that div by id (“workflow_diagram_canvas”) is returning a valid div via jQuery.

Is there something more you can tell me about this error?

#2

Which version of GoJS are you using?

I’m guessing that if that was a call to GraphObject.make to construct and initialize a Diagram, that you passed that “workflow_diagram_canvas” string as some argument other than the second one, just after the first argument which is go.Diagram.

#3

Oh, whoops, I meant to mention that, it’s an old version: 1.6.22.

The argument’s position isn’t changing. It’s the same call in the places that does and does not work:

this.diagram = GO(go.Diagram, divId, {
  allowCopy: false,
  allowDelete: false,
  ...
});
#4

And the value of divId is “workflow_diagram_canvas” at the time that expression is evaluated?

#5

Correct.

Both in the situations that the code works, and when I get the error.

#6

In looking at the code, there’s only one place where that error message is thrown, and I think the only way to get to that when making a Diagram is when that “workflow_diagram_canvas” string is not the second argument to GraphObject.make.

By the way, if window.document.getElementById did not return a non-null value, you would get the error “Invalid DIV id; could not get element with id: …”.

#7

I don’t really see how it would be possible, my first argument to that function is a static constant from go itself.

this is the entire beginning of the function definition:

PfdRenderer.init = function(divId) {
  // If we have already built the diagram object, bail out as there is nothing else to do
  if (this.diagram) {
    return;
  }
  // Capture "this" for use in the command handler overrides
  var self = this;

  // console.time("Create diagram");
  this.diagram = GO(go.Diagram, divId, {
    allowCopy: false,
    ....

I won’t have time until later today but I can try and debug my way into the function and see if I can give you any more info that might be useful.

#8

So I can confirm that all the values when I load in are what I expect.

go.Diagram is resolving to the same thing in both the success and failure cases, divId is resolving to the same thing in both cases, and the selector is finding the div (when I do it manually) in both cases.

When I step into the gojs code, it’s minified so it’s hard to tell exactly what’s going on but the difference is in this line in G.make.

if (d instanceof B && 1 < c.length) {

The first check (the instanceof) passes in the success case and fails in the error case. They both look like go objects of some kind, can you tell me what they are? (Or tell me a property to look at on them to give you more info.)

#9

Oh, wait – you are using go-debug.js. The code you quote is not in go.js version 1.6.22, but it is in go-debug.js.

In that particular minified library, B is the same as go.Diagram. And c is the arguments array.

So it seems the second time that an instance of go.Diagram is not an instanceof go.Diagram. That leads me to wonder if maybe you have loaded the library twice, thereby redefining go.Diagram incompatibly with itself. Maybe you have loaded both go.js and go-debug.js? Or two different versions of go-debug.js?