require.js:168 Uncaught Error: Mismatched anonymous define() module: function(a) {...

require.js:168 Uncaught Error: Mismatched anonymous define() module: function(a) {...

by Amanda Doughty -
Number of replies: 4
Picture of Core developers Picture of Plugin developers

We recently hit an issue with two plugins clashing and causing the error:

require.js:168 Uncaught Error: Mismatched anonymous define() module: function(a) {...


Also mentioned in:

https://moodle.org/mod/forum/discuss.php?d=87044#p1544394

And logged here:

https://bitbucket.org/covuni/moodle-mod_bootstrapelements/issues/12/javascript-problem-disables-all-edit


Guy Thomas fixed it by moving the following code (details omitted) from above a define to inside it:

    (function() {
            var pluginJSURL = function(path) {
                ...

            require.config({
                paths: {
                    // Vendor code.
                    ...
                },
                shim: {
                    ...
                    }
                }
            });
        })();

The clashing code from mod_bootstrapelements is attached.


I'd really like to understand what is going on and why the code in mod_bootstrapelements is causing these clashes. When installed as the only Moodle plugin there are no errors.

Average of ratings: Useful (1)
In reply to Amanda Doughty

Re: require.js:168 Uncaught Error: Mismatched anonymous define() module: function(a) {...

by Amanda Doughty -
Picture of Core developers Picture of Plugin developers
I have fixed our issues by editing mod/bootstrapelements/amd/src/fontawesome-iconpicker.js

In 2 places remove:

(function(a) {
"use strict";
if (typeof define === "function" && define.amd) {
define([ "jquery" ], a);
} else if (window.jQuery && !window.jQuery.fn.iconpicker) {
a(window.jQuery);
}
})(function(a) {
"use strict";‌

and replace with:

define(['jquery'], function(a) {

I would still like to understand why this caused a problem?
Average of ratings: -
In reply to Amanda Doughty

Re: Re: require.js:168 Uncaught Error: Mismatched anonymous define() module: function(a) {...

by Mathieu Pelletier -
Hi Amanda,

Thanks for the fix. Correct me if I am wrong, but it seems Advanced Notifications is part of the problem. It does not look like that module is including its Javascript as AMD modules. We also use advanced notifications, but even with the above fix for bootstrap elements, advnotifications block is breaking our dashboard.

I am not a seasoned Javascript programmer, so if you can illuminate things further, that would be awesome.

All the best,
Mathieu
Average of ratings: -
In reply to Mathieu Pelletier

Re: Re: Re: require.js:168 Uncaught Error: Mismatched anonymous define() module: function(a) {...

by Amanda Doughty -
Picture of Core developers Picture of Plugin developers
I've emailed you the files I changed
Average of ratings: -
In reply to Amanda Doughty

Re: require.js:168 Uncaught Error: Mismatched anonymous define() module: function(a) {...

by Sharon Strauss -
Picture of Testers

Thanks. I am seeing this as well.  Do you know what plugins cause the problem? We don't use Sharing Cart.

Average of ratings: -