Uncaught Error: Mismatched anonymous define() module

Question

I'm a masochist, so I decided to change the way in which I load require.js in my project. All I did was go from this (using Modernizr.load)...

<script type="text/javascript">

    function requireJsConfig () {
        requirejs.config({
            'baseUrl': '{{ STATIC_URL }}js',
            'paths': {
                'jquery': 'libraries/jquery',
                'backbone': 'libraries/backbone',
                'underscore': 'libraries/underscore',
                'jquery.cookie': 'libraries/jquery-cookie',
                'tinymce': 'tinymce/tinymce.min',
                'react' : 'libraries/react',
                'history': 'history'
            },
            waitSeconds: 30,
            shim: {
                'jquery' : 'jquery',
                'underscore' : {
                    exports: '_'
                },
                'backbone': {
                    deps: ['underscore', 'jquery'],
                    exports: 'Backbone'
                },
                'jquery.cookie': {
                    deps: ['jquery'],
                    exports: '$.cookie'
                },
                'tinymce': {
                    deps: ['jquery'],
                    exports: 'tinymce'
                }
            }
        });

        define('static_url', [], "{{ STATIC_URL }}");
        window.static_url = "{{ STATIC_URL }}";
        define('PUBNUB_SUBSCRIBE_KEY', [], "{{ PUBNUB_SUBSCRIBE_KEY }}");

        require(["teacher"]);
    };

    Modernizr.load({
        load: '{{ STATIC_URL }}js/require.js',
        complete: function() {
            requireJsConfig();
        }
    });

</script>

...to this (not using Modernizr.load)...

<script type="text/javascript" src="{{ STATIC_URL }}js/require.js"></script>

<script type="text/javascript">

    function requireJsConfig () {
        requirejs.config({
            'baseUrl': '{{ STATIC_URL }}js',
            'paths': {
                'jquery': 'libraries/jquery',
                'backbone': 'libraries/backbone',
                'underscore': 'libraries/underscore',
                'jquery.cookie': 'libraries/jquery-cookie',
                'tinymce': 'tinymce/tinymce.min',
                'react' : 'libraries/react',
                'history': 'history'
            },
            waitSeconds: 30,
            shim: {
                'jquery' : 'jquery',
                'underscore' : {
                    exports: '_'
                },
                'backbone': {
                    deps: ['underscore', 'jquery'],
                    exports: 'Backbone'
                },
                'jquery.cookie': {
                    deps: ['jquery'],
                    exports: '$.cookie'
                },
                'tinymce': {
                    deps: ['jquery'],
                    exports: 'tinymce'
                }
            }
        });

        define('static_url', [], "{{ STATIC_URL }}");
        window.static_url = "{{ STATIC_URL }}";
        define('PUBNUB_SUBSCRIBE_KEY', [], "{{ PUBNUB_SUBSCRIBE_KEY }}");

        require(["teacher"]);
    };

    requireJsConfig();

</script>

...and now I'm getting this:

Uncaught Error: Mismatched anonymous define() module: function (){return r}

FWIW, this is where the error is happening (in require.js):

function intakeDefines() {
    var args;

    //Any defined modules in the global queue, intake them now.
    takeGlobalQueue();

    //Make sure any remaining defQueue items get properly processed.
    while (defQueue.length) {
        args = defQueue.shift();
        if (args[0] === null) {
            return onError(makeError('mismatch', 'Mismatched anonymous define() module: ' + args[args.length - 1]));
        } else {
          //args are id, deps, factory. Should be normalized by the
          //define() function.
          callGetModule(args);
        }
    }
}

And by the way, I've already verified that none of these apply.

Why did this seemingly innocuous change cause a nuclear bomb to explode in my project? (Yes, an actual nuclear bomb detonated...as if millions of voices suddenly cried out in terror, and were suddenly silenced...)

Louis Louis · Accepted Answer · 2015-05-12T16:15:58

Let's see if I can explain it better than Patrick did...

You do not need a shim for underscore because it detects whether it is running with an AMD loader, and if so, then it calls define. Don't use shim for modules that call define.

You should also remove the shim for jQuery. Unless you are using an ancient version, it also detects that it is running with an AMD loader and calls define. Moreover the shim jquery: "jquery" is meaningless. (The closest meaningful shim I could think of would be jquery: ["jquery"] which would mean "jquery depends on jquery".)

As to why it would have worked before... when you use shim with modules that call define you enter undefined territory: sometimes it works, sometimes it does not.

I don't know whether the other modules need shims or not because I don't use them regularly. If I were you, I'd check whether they call define.

Uncaught Error: Mismatched anonymous define() module

2 Answers