Mocha v3 triggers "mismatched anonymous define()" error

[fearphage]

Using mocha v3 with RequireJS, causes it to throw a mismatched anonymous define() error. I've verified with 3.0.0 and 3.0.1. The latest 2.x (2.5.3) branch works flawlessly. I didn't see anything that seemed related in the change log

Error: Mismatched anonymous define() module: function () {
      return JSON3;
    }
http://requirejs.org/docs/errors.html#mismatch

Requirejs v2.2.0 (latest)

Another reference: karma-runner/karma-requirejs#50 (This is not my ticket, just came up in Googling)

[lddubeau]

The mocha.js file that we load in browsers does things that are incorrect from the perspective of AMD loaders. It is a non-AMD-aware script that incorporates within itself scripts that are AMD-aware, without taking the necessary precautions. That's a recipe for maybe not "disaster", but for getting errors like the one reported here.

Workaround

Here's a workaround: load Mocha in a script element before you load RequireJS. None of the code in Mocha will try to call define because it won't be able to find define. Mocha will export itself as a global. And everything will work fine. When you load Mocha in Karma, put the frameworks in this order to get Mocha to load before RequireJS:

frameworks: ["requirejs", "mocha"],

For whatever reason, Karma loads the frameworks in reverse order.of the order in which they are listed in frameworks. If you list RequireJS first, it is loaded last.

What's the issue?

The Mocha 2.x series had one call to define but I suspect it was called only with specific configurations so people were no usually hitting it. I have a test setup similar to Karma in which I load Mocha 2.x through RequireJS. I ran a trace there but did not hit the define that is in the 2.x version.

In 3.x there is a second define call, which looks like it is is always hit if the code detects that an AMD loader is present.

From the perspective of AMD loaders, a script which is loaded through a script element cannot call the anonymous form of define (e.g. define([... deps...], function factory(....) {....). Anonymous define calls are okay so long as the loader has a way to assign a module name to the code. A module name is not the same as a URL. The only thing the loader can possibly get from a script element is the URL, which is not a module name, so there's nothing the loader can do with the anonymous define. What a script element could contain are named define calls (e.g. define("AwesomeLib", [... deps...], function (....) { ...)

However, in the case of Mocha, just slapping names on the define calls won't do.

I see browserify is used to build mocha.js. I'm not familiar with it but I suspect there are plugins or options that could be used.

[fearphage]

@lddubeau Thanks for digging in. Just for reference, I'm not using karma at all. Reversing the order of the includes did resolve the error though. Thanks for the work around!

EDIT: Reversing the order causes problems with things that depend on both (json-cov for instance).

[boneskull]

@fearphage What depends on json-cov? You might have multiple versions of Mocha being loaded, since Mocha@3 removed it.

[boneskull]

@lddubeau Thanks for the explanation. I believe I can use derequire to fix this, as has been suggested elsewhere.

[boneskull]

It appears derequire won't get the job done. I'll handroll something.