Mismatched anonymous define() module

Question

I'm getting this error when I browse my webapp for the first time (usually in a browser with disabled cache).

Error: Mismatched anonymous define() module: function (require) {

HTML:

<html>
   .
   .
   .
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
   <script> var require = { urlArgs: "v=0.4.1.32" }; </script>
   <script data-main="assets/js/main" src="assets/js/libs/require.js"></script>
   <script src="assets/js/ace/ace.js?v=0.4.1.32"></script>
   </body>
</html>

JS:

$(function () {
    define(function (require) {
        // do something
    });
});

Anyone know exactly what this error means and why it's happening?

source file, a short discussion about it in the github issues page

score 156 · Accepted Answer · answered May 05 '14 at 07:28

156

Like AlienWebguy said, per the docs, require.js can blow up if

You have an anonymous define ("modules that call define() with no string ID") in its own script tag (I assume actually they mean anywhere in global scope)
You have modules that have conflicting names
You use loader plugins or anonymous modules but don't use require.js's optimizer to bundle them

I had this problem while including bundles built with browserify alongside require.js modules. The solution was to either:

A. load the non-require.js standalone bundles in script tags before require.js is loaded, or

B. load them using require.js (instead of a script tag)

answered May 05 '14 at 07:28

B T

57,525
34
189
207

2

conflicting names is a common one – Julio Marins May 23 '16 at 15:18
2

Another possible solution, in some special cases with anonymous modules is to overwrite the requirejs.onError function in order to prevent the default error exception thrown by requirejs which stops succesive modules or code to be executed. – xtrm May 22 '17 at 16:42
2

Just added a pull request (https://github.com/requirejs/requirejs/pull/1763) to relax that exact case. I think its a very common problem these days. – Bob S Dec 03 '18 at 20:56
1

Thanks for telling me to load them before! I don't know why this tip isn't in requirejs's own documentation... That's where stack comes in handy – Tobias Feil Mar 04 '20 at 11:34

score 18 · Answer 2 · edited Sep 26 '20 at 19:29

In getting started with require.js I ran into the issue and as a beginner the docs may as well been written in greek.

The issue I ran into was that most of the beginner examples use "anonymous defines" when you should be using a "string id".

anonymous defines

define(function() {
        return { helloWorld: function() { console.log('hello world!') } };
 })
    
  
define(function() {
        return { helloWorld2: function() { console.log('hello world again!') } };
 })

define with string id

define('moduleOne',function() {
    return { helloWorld: function() { console.log('hello world!') } };
})

 define('moduleTwo', function() {
      return { helloWorld2: function() { console.log('hello world again!') } };
})

When you use define with a string id then you will avoid this error when you try to use the modules like so:

require([ "moduleOne", "moduleTwo" ], function(moduleOne, moduleTwo) {
    moduleOne.helloWorld();
    moduleTwo.helloWorld2();
});

(Just a note for posterity) There *are* some downsides to this approach, described [in the docs](http://requirejs.org/docs/api.html#modulename): “define() calls that include a name for the module… are normally generated by the optimization tool… nam[ing] modules yourself… makes the modules less portable… It is normally best to avoid coding in a name for the module and just let the optimization tool burn in the module names.” …as well as in [this GitHub thread](https://github.com/moment/moment/issues/1095). This seems to be the reason why listing the name is excluded in the beginner examples. — Mark G., Nov 18 '17 at 21:42

score 15 · Answer 3 · answered Aug 11 '14 at 21:58

15

I had this error because I included the requirejs file along with other librairies included directly in a script tag. Those librairies (like lodash) used a define function that was conflicting with require's define. The requirejs file was loading asynchronously so I suspect that the require's define was defined after the other libraries define, hence the conflict.

To get rid of the error, include all your other js files by using requirejs.

answered Aug 11 '14 at 21:58

eloone

4,248
2
32
35

Turned out a lot of libraries do such a thing, or at least use/export such a function. I'll advise everyone - if they use require - import **everything** with require :) – Andrey Popov Mar 09 '15 at 13:25

score 12 · Answer 4 · edited Jun 20 '20 at 09:12

Per the docs:

If you manually code a script tag in HTML to load a script with an anonymous define() call, this error can occur.

Also seen if you manually code a script tag in HTML to load a script that has a few named modules, but then try to load an anonymous module that ends up having the same name as one of the named modules in the script loaded by the manually coded script tag.

Finally, if you use the loader plugins or anonymous modules (modules that call define() with no string ID) but do not use the RequireJS optimizer to combine files together, this error can occur. The optimizer knows how to name anonymous modules correctly so that they can be combined with other modules in an optimized file.

To avoid the error:

Be sure to load all scripts that call define() via the RequireJS API. Do not manually code script tags in HTML to load scripts that have define() calls in them.

If you manually code an HTML script tag, be sure it only includes named modules, and that an anonymous module that will have the same name as one of the modules in that file is not loaded.

If the problem is the use of loader plugins or anonymous modules but the RequireJS optimizer is not used for file bundling, use the RequireJS optimizer.

Is this an anonymously defined module? https://github.com/requirejs/example-multipage/blob/master/www/js/app/controller/c1.js — streetlight, Jul 03 '14 at 12:24

score 9 · Answer 5 · answered Nov 10 '15 at 17:22

9

The existing answers explain the problem well but if including your script files using or before requireJS is not an easy option due to legacy code a slightly hacky workaround is to remove require from the window scope before your script tag and then reinstate it afterwords. In our project this is wrapped behind a server-side function call but effectively the browser sees the following:

    <script>
        window.__define = window.define;
        window.__require = window.require;
        window.define = undefined;
        window.require = undefined;
    </script>
    <script src="your-script-file.js"></script>        
    <script>
        window.define = window.__define;
        window.require = window.__require;
        window.__define = undefined;
        window.__require = undefined;
    </script>

Not the neatest but seems to work and has saved a lot of refractoring.

answered Nov 10 '15 at 17:22

jcbdrn

995
6
9

5

Actually don't ever do this. It doesn't work properly in IE. – jcbdrn Nov 20 '15 at 10:16
2

Intermittently in IE the scripts included with requireJS would have define missing from their window scope even when the require command came after the those variables were restored. We never managed to figure out why this occurred so we abandoned this hacky solution. – jcbdrn Apr 22 '16 at 10:00
3

@jcbdrn It's not just on IE. I've seen it happen on other platform. The reason is that the HTML spec does offer guarantees regarding the order of execution of synchronous scripts *but only relative to other synchronous scripts*. It does not guarantee the execution of *asynchronous* scripts relative to synchronous one (or vice-versa). So in the code shown in the answer here, it is possible to have an asynchronous script execute between any two `script` elements. – Louis Jan 20 '17 at 19:28
If you have the ability to edit the bundle js you're importing you can just wrap the whole thing like this: ```(function(){ var define = undefined; // the UMD registration code won't find the global 'define' anymore! // generated content goes here })()``` – Pete Thorne Aug 29 '19 at 07:47
Thanks, for legacy apps with a lot of teams, this is the ideal solution... :/ – Gabriel Anderson Apr 08 '21 at 20:11
i love u bro. my hero! – Timotheus0106 Feb 03 '22 at 11:25

score 5 · Answer 6 · answered Apr 28 '15 at 19:24

5

Be aware that some browser extensions can add code to the pages. In my case I had an "Emmet in all textareas" plugin that messed up with my requireJs. Make sure that no extra code is beign added to your document by inspecting it in the browser.

answered Apr 28 '15 at 19:24

Vector

747
2
11
22

score 3 · Answer 7 · answered Apr 04 '19 at 14:14

3

Or you can use this approach.

Add require.js in your code base
then load your script through that code

<script data-main="js/app.js" src="js/require.js"></script>

What it will do it will load your script after loading require.js.

answered Apr 04 '19 at 14:14

Umar Asghar

3,808
1
36
32

Binita Bharati · Answer 8 · 2021-02-04T06:24:49.077

I was also seeing the same error on browser console for a project based out of require.js. As stated under MISMATCHED ANONYMOUS DEFINE() MODULES at https://requirejs.org/docs/errors.html, this error has multiple causes, the interesting one in my case being: If the problem is the use of loader plugins or anonymous modules but the RequireJS optimizer is not used for file bundling, use the RequireJS optimizer. As it turns out, Google Closure compiler was getting used to merge/minify the Javascript code during build. Solution was to remove the Google closure compiler, and instead use require.js's optimizer (r.js) to merge the js files.

Mismatched anonymous define() module

8 Answers8

Linked

Related