When integrate a javascript libary,i met error:Uncaught Error: Mismatched anonymous define() module: function()

dear everyone:
forgive my poor english,pls.
i want to develope some extensions,but when i integreate some javalibrary,i met error:
Uncaught Error: Mismatched anonymous define() module: function()
following is my steps:
1.follow the instructions on https://www.xwiki.org/xwiki/bin/view/Documentation/DevGuide/FrontendResources/IntegratingJavaScriptLibraries/
2. create a panel ,then code as below(i add some spaces in “script”,pls ignore):

{{velocity}}
{{html}}
< s c ript src="//cdnjs.cloudflare.com/ajax/libs/viewerjs/1.3.0/viewer.min.js"
type=“text/javascript”></s c r ip t>
{{/html}}
{{/velocity}}

i tried the first 4 ways on this page https://www.xwiki.org/xwiki/bin/view/Documentation/DevGuide/FrontendResources/IntegratingJavaScriptLibraries/,all get this error

so ,how can i fix this problem

this is due to de configuration of require.js
i should use its shim option to integreate js modules

I’m hitting this trying to integrate Frappe Gantt lib: Open Source Javascript Gantt (which depends on momentjs and snapsvg).

Can you share how you solved it?

@watery can you share the code that you tried and that didn’t work? And what version of XWiki are you using? What JavaScript error are you getting exactly?

Sure:

require(['jquery'], function ($) {
    $.getScript("https://frappe.io/gantt/js/moment.min.js")
        .done((data, textStatus) => {
            $.getScript("https://frappe.io/gantt/js/snap.svg-min.js")
                .done((data, textStatus) => {
                    console.log(data); // Data returned
                    console.log(textStatus); // Success

                    $.getScript("https://frappe.io/gantt/js/frappe-gantt.min.js")
                        .done((data, textStatus) => {
                            console.log(data); // Data returned
                            console.log(textStatus); // Success

                            console.log('Snap object: ', typeof Snap)
                            console.log('Ganttobject: ', typeof Gantt)
                        })
                        .fail(() => { alert('No frappe') })
                })
                .fail(() => { alert('No snap') })
        })
        .fail(() => { alert('No moment') })
});

Consider that these are just quick experiments to see whether a library fits well (like I did with others, like in Is there a timeline macro / plugin or similar? - #5 by watery), I didn’t read much about properly develop extensions, just the bare minimum (or maybe less than that :sweat_smile:)

14.6

This is the console output (Firefox):

JQMIGRATE: Migrate is installed with logging active, version 3.3.2 jquery-migrate.min.js:2:709
Uncaught Error: Mismatched anonymous define() module: function(){"use strict";function a(){return md.apply(null,arguments)}
// This is done to register the method called with moment()
// without creating circular dependencies.
function b(a){md=a}function c(a){return a instanceof Array||"[object Array]"===Object.prototype.toString.call(a)}function d(a){
// IE8 will treat undefined and null as object if it wasn't for
// input != null
return null!=a&&"[object Object]"===Object.prototype.toString.call(a)}function e(a){var b;for(b in a)
// even if its not own property I'd still call it non-empty
return!1;return!0}function f(a){return a instanceof Date||"[object Date]"===Object.prototype.toString.call(a)}function g(a,b){var c,d=[];for(c=0;c<a.length;++c)d.push(b(a[c],c));return d}function h(a,b){return Object.prototype.hasOwnProperty.call(a,b)}function i(a,b){for(var c in b)h(b,c)&&(a[c]=b[c]);return h(b,"toString")&&(a.toString=b.toString),h(b,"valueOf")&&(a.valueOf=b.valueOf),a}function j(a,b,c,d){return …
    makeError require.min.js:5
    T require.min.js:5
    s require.min.js:5
    [...]
    emit require.min.js:5
require.min.js:5:1795
console.trace() jquery-migrate.min.js:2:1010
    jQuery 2
    init bootstrap.min.js:6
    [...]
    enable require.min.js:5
    bind require.min.js:5
undefined WebHome:6:28
success WebHome:7:28
undefined WebHome:11:36
success WebHome:12:36
Snap object:  undefined WebHome:14:36
Ganttobject:  undefined WebHome:15:36
Uncaught Error: Mismatched anonymous define() module: function(c){return b(a,c)}
https://requirejs.org/docs/errors.html#mismatch
    makeError require.min.js:5
    T require.min.js:5
    [...]
    enable require.min.js:5
    init require.min.js:5
require.min.js:5:1795

I must say it doesn’t come out always the same, i.e. this is after two or three page refreshes, here some console.log() have been executed, it seems:

Spostato su http://<xwiki-host>/xwiki/bin/view/XWikiExperiments/Gantt/Frappe/
JQMIGRATE: Migrate is installed with logging active, version 3.3.2 jquery-migrate.min.js:2:709
console.trace() jquery-migrate.min.js:2:1010
    jQuery 7
    <anonima> http://<xwiki-host>/xwiki/webjars/wiki:xwiki/bootstrap/3.4.1/js/bootstrap.min.js?r=1:6
    <anonima> http://<xwiki-host>/xwiki/webjars/wiki:xwiki/bootstrap/3.4.1/js/bootstrap.min.js?r=1:6
console.trace() jquery-migrate.min.js:2:1010
    jQuery 2
    [...]
    bind require.min.js:5
Uncaught Error: Mismatched anonymous define() module: function(){"use strict";function a(){return md.apply(null,arguments)}
// This is done to register the method called with moment()
// without creating circular dependencies.
function b(a){md=a}function c(a){return a instanceof Array||"[object Array]"===Object.prototype.toString.call(a)}function d(a){
// IE8 will treat undefined and null as object if it wasn't for
// input != null
return null!=a&&"[object Object]"===Object.prototype.toString.call(a)}function e(a){var b;for(b in a)
// even if its not own property I'd still call it non-empty
return!1;return!0}function f(a){return a instanceof Date||"[object Date]"===Object.prototype.toString.call(a)}function g(a,b){var c,d=[];for(c=0;c<a.length;++c)d.push(b(a[c],c));return d}function h(a,b){return Object.prototype.hasOwnProperty.call(a,b)}function i(a,b){for(var c in b)h(b,c)&&(a[c]=b[c]);return h(b,"toString")&&(a.toString=b.toString),h(b,"valueOf")&&(a.valueOf=b.valueOf),a}function j(a,b,c,d){return …
    makeError http://<xwiki-host>/xwiki/webjars/wiki:xwiki/requirejs/2.3.6/require.min.js?r=1:5
    T http://<xwiki-host>/xwiki/webjars/wiki:xwiki/requirejs/2.3.6/require.min.js?r=1:5
    [...]
    <anonymous> http://<xwiki-host>/xwiki/webjars/wiki:xwiki/xwiki-platform-tree-webjar/14.6/require-config.min.js?evaluate=true:3
require.min.js:5:1795
undefined WebHome:6:28
success WebHome:7:28
Uncaught Error: Mismatched anonymous define() module: function(c){return b(a,c)}
https://requirejs.org/docs/errors.html#mismatch
    makeError http://<xwiki-host>/xwiki/webjars/wiki:xwiki/requirejs/2.3.6/require.min.js?r=1:5
    T http://<xwiki-host>/xwiki/webjars/wiki:xwiki/requirejs/2.3.6/require.min.js?r=1:5
    [...]
    <anonymous> http://<xwiki-host>/xwiki/webjars/wiki:xwiki/xwiki-platform-ckeditor-webjar/14.6/ckeditor.js:1600
require.min.js:5:1795
Uncaught TypeError: c is null
    setLang http://<xwiki-host>/xwiki/webjars/wiki:xwiki/xwiki-platform-ckeditor-webjar/14.6/ckeditor.js:255
    <anonymous> http://<xwiki-host>/xwiki/bin/jsx/CKEditor/Translations?language=en:9
    [...]
    <anonymous> http://<xwiki-host>/xwiki/bin/jsx/CKEditor/Translations?language=en:1
ckeditor.js:255:411
undefined WebHome:11:36
success WebHome:12:36
Snap object:  undefined WebHome:14:36
Ganttobject:  undefined WebHome:15:36

This worked for me:

require.config({
  paths: {
    'Gantt': 'https://frappe.io/gantt/js/frappe-gantt.min',
    'snap.svg': 'https://frappe.io/gantt/js/snap.svg-min'
  }
});

require(['moment', 'Gantt', 'snap.svg'], function(moment, Gantt, snap) {
  ...
});

When integrating an external JavaScript library in XWiki you should use RequireJS and thus you should check if that library supports RequireJS out of the box or not. In your case:

  • moment.js is already bundled in XWiki and you can simply ask for it
  • Gantt and snap.svg both support RequireJS (look for define( in their code) so you just have to tell RequireJS their paths

Hope this helps,
Marius