GoJs and requireJs

[ee0jmt]

Hi,

GoJs Version: 2.0.17

I am using GoJs within the durandal framework (which uses requirejs) It all works fine until the project is minimized and then I get an error stating gojs is undefined. I have seen the example using gojs and require and everything is set up correctly.

If I remove gojs from the requirejs “define” gojs appears to be in the global scope. and the project works after being minimized. However when I do this the project no longer works during development (not minimized).

I have seen some similar forum posts about a similar issue with aurelia.

I am using several other libraries in the project and don’t have the problem. What is the solution?

[walter]

Is the error that “go” is no longer defined after minification? What is the error?

We are not familiar with those tool chains. Are those other libraries already minified? Exactly what tool is doing minification, and with which options?

It seems implausible that things do not work without minification but you are loading “go.js” in a script tag.

[ee0jmt]

Hi Walter,

Yes some of the libraries are already minified.

I am not loading go.js in a script tag, I am using requirejs.

I have added the path to my requirejs config:

paths: {
‘go’: ‘’…/vendor/go/go’
}

and imported the lib into my module using:

define([‘go’], function (go) {
go.licenseKey = “xxxxxxx”;

This works fine during development, but after minification I get the error: "Cannot set property ‘licenseKey’ of undefined. If I type “go” into google dev tools console I get an output of the go library. So I am assuming it is in the global scope?

If I update my code to the following:

define([], function () {
go.licenseKey = “xxxxxxx”;

After minification it works, however it does not work in development mode, I get the error: “go is not defined”

The tool doing the minification is this npm package “gulp-durandal” however I believe it is a requirejs wrapper. Options in image below.

[simon]

It’s not clear to us why go would be undefined in the context, after minification. You may need to pretty-print the output and try to determine why the var that supposedly exists is undefined.

[ee0jmt]

Its probably worth mentioning that the project is not being minified, but is just being optimized into one file.

After optimization, I don’t think gojs it is being imported correctly by requirejs (possibly because it already exists globally, although don’t quote me on that).

Using this code:
define([‘go’], function (golib) {
console.log(‘golib’, golib);
console.log(‘go’, go);

If I run in dev the output is:

golib {Group: f, EnumValue: f, List: f, …}
go {Group: f, EnumValue: f, List: f, …}

Both golib and go are defined.

If I run it after optimization the output is:

golib undefined
go {Group: f, EnumValue: f, List: f, …}

golib which is imported using requirejs is not defined???

In both instances go is available in the global scope.

I have also just downloaded the sample from gihub “gojs/samples/require.html”. It would appear that the same problem exists.

The output from the above is:

go {Group: f, EnumValue: f, List: f, …}
goLib {Group: f, EnumValue: f, List: f, …}

It would appear that the statement: go.GraphObject.make is using the global version of go and not the imported version.

Hope this helps.

[walter]

What do you have in your main.js file? Do you export “go” with the value you required from go.js?

[ee0jmt]

This is my requirejs config.

Looking at the sample code in require.html:

In the above code, I have access to the go lib through the variables “goLib” imported by requirejs and “go” which is global.

If I remove the requirejs import.

I get the error “go is not defined”.

I believe that go is being exposed globally and this is causing my problems.

[walter]

Well, I think if you are not going to load the go.js library in a <script> tag, you have to include “go” in your Array argument to require.

I’ll assume your code is like:

require(["go"], function(go) {
  console.log(go);
});

If I have understood your earlier posts correctly, this code works at development time but not after “optimization”. What exactly is done by “optimization”? If this code prints undefined, can you confirm with the debugger that the go.js library was actually loaded?

[ee0jmt]

Hi Walter,

I am not loading go.js using a script tag because I am using requirejs to load the module.

I am importing go using the following code and it does work in development.

require(["go"], function(go) {
  console.log(go);
  var $ = go.GraphObject.make;
});

However if I also change my code to the following it still works:

require(["go"], function(thisIsNotTheGoJsLib) {
  console.log(go);
  var $ = go.GraphObject.make;
});

Which indicates to me that “go” is declared globally because the go module imported (thisIsNotTheGoJsLib) is not being used and “go” is not declared anywhere else.

I am not an expert with requirejs, but my guess is that when the optimization is done it it imports the gojs lib globally, but then excludes the lib from the requirejs import, because it already exists.

This means that after optimization the imported “go” is not defined hence the error. (however i’m not really sure why it is not using the global version as it seems to do in development, other than the optimization prevents this.)

Can I ask that you look at your sample code “require.html”

This is the original code with the addition of the console.log:

This code works. Now change the code to this:

This still works, but the imported lib var has been changed to “goLib” and the code is still referencing the var “go”. Where is “go” defined?

Now change the code to this

Now “go” is not defined

So by importing the code using requireJs it is making go available globally, but also assigning it to “goLib”

If it makes it easier, I am happy to arrange a skype call to go through the problem.

[walter]

When we originally implemented support for UMD in version 1.3, some customers complained. So we put the global definition of “go” back in. Here’s the change log entry for version 1.3.3:

When AMD Module define capability is present, go is still exposed to the global object, which avoids problems with undefined go when explicitly loading "go.js" instead of using your framework’s require mechanisms.

I do not think it is reasonable to expect require to load go.js when “go” is not in the require argument Array. So I do not understand why you keep presenting that scenario.

Could you please tell us exactly what software you are using that is doing that “optimization”? Maybe there is a way to control its behavior.

[ee0jmt]

Hi Walter.

This is the plugin doing the optimization

gulp-durandal

It is specific to the Single Page Application framework:

http://durandaljs.com/

@walter

I do not think it is reasonable to expect require to load go.js when “go” is not in the require argument Array. So I do not understand why you keep presenting that scenario.

I understand that, but just trying to prove the point.

From your latest response you have now confirmed that go is in global scope which kind of defeats the object of loading it with requirejs.

In the mean time I have implemented a bit of a hack:

require(["go"], function() {
  console.log(go);
  var $ = go.GraphObject.make;
});

Still specifying “go” but not assigning the module to the go variable. This allows the go lib to be included in the optimized file but allows it to be accessed globally.

This is not something I want to carry forward.

Thanks for your help, any additional help would be appreciated to get this problem resolved.

[walter]

Is there a problem if you execute delete window.go; or something like that?