GoJS with Aurelia Mismatch Error

Hi all, I created a new aurelia project and installed gojs via npm. I added gojs to the aurelia.json dependencies and, without adding any gojs code, just tried to build. The build worked fine and gojs went to the vendor-bundle.js The issue is, when I run the project, I get errors from gojs. When I remove the gojs dependency in aurelia.json, the project runs just fine but adding it back always throws the same error located below. Please help.

Uncaught Error: Mismatched anonymous define() module: [object Object]
http://requirejs.org/docs/errors.html#mismatch
at makeError (vendor-bundle.js:11531)
at intakeDefines (vendor-bundle.js:12617)
at vendor-bundle.js:12815
makeError @ vendor-bundle.js:11531
intakeDefines @ vendor-bundle.js:12617
(anonymous) @ vendor-bundle.js:12815
setTimeout (async)
req.nextTick @ vendor-bundle.js:13178
localRequire @ vendor-bundle.js:12812
requirejs @ vendor-bundle.js:13160
(anonymous) @ vendor-bundle.js:13199
(anonymous) @ vendor-bundle.js:13508

I’m sorry, but I am completely unfamiliar with Aurelia.

What is actually happening? The GoJS library follows UMD conventions, and I know that it has been used in both CommonJS and AMD environments.

I noticed it was done in a forum post by another user before. Basically, if I want to make use of 3rd party items like d3, gojs, or even kendo. I just need to add them to the vendor-bundle dependency for the project. It’s just a pointer to their location in the node-modules folder.

{
“name”: “gojs”,
“path”: “…/node_modules/gojs/release”,
“main”: “go”
}

This tells Aurelia to use go.js in the gojs/release folder in node-modules. I add bootstrap this way, kendo this way, basically anything this way.

A build and run just adds those dependencies to my project. When I add gojs I get the error shown above.

Update: I removed gojs from aurelia.json and just used the CDN in my index.html file and still got the exact same error.

So you didn’t find that other post to be useful?

That sample does include “gojs” as a dependency in package.json.

But it has this in its aurelia.json file:

      {
          "name": "gojs",
          "path": "../node_modules/gojs/release",
          "main": "go",
          "exports": "go"
      }

I logged a bug with that post as the user hasn’t updated it since.

@cdaniel If your Aurelia project is relatively minimal, can you share it with us? We’d like to make sure this isn’t a bug in the design of the go.js library. You can email us, gojs at nwoods.com

I found the issue, seems gojs and requirejs want to load two empty definitions of define. Because Aurelia loads the vendor bundle after prepending requirejs, requirejs cannot resolve the duplicate load so it throws the error. To solve the problem I just had to prepend gojs before requirejs and it recognized that the define was already there and resolved accordingly. It was just placing gojs in a different location. This is not something new users to Aurelia will face as Aurelia has defaulted webpack on a new project create. Webpack resolves most duplicates issues, this being one of them. Anyone using straight requirejs will have this issue but they can resolve it as stated above. I posted my issue on Stackoverflow. Here is the link where the solution resides. https://stackoverflow.com/questions/49451227/gojs-and-aurelia-mismatch-error

The problem now is to find out why it is that way with gojs only, so far, but this is a resolution to the issue.

I see. I think it may be because our library uses an anonymous define:

define(go)

We’ll consider switching to a named define statement, which will probably fix this

define('go', go)

But we need to make sure this won’t affect current users adversely.

If you wanted to try this in your own project, you could edit the go.js file by searching for define and replacing whatever it is, say window.define(ca) to window.define('go', ca). (that’s what it’s minified as in the latest go.js release)

That would at least confirm that the anonymous define is the issue.

We’ve experienced this issue when loading via the Dojo loader as well (which is using require). It causes issues with bundling due to the anonymous define.

Disclaimer: I’m the author of that GoJS Aurelia sample as well.

Edit: Add disclaimer

Please note that we’ve decided to keep the anonymous define, which seems consistent with the require.js recommendations in their documentation that it’s best not to name modules.