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

[watery]

@mflorea

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.

Thank you for the clarifications. Knowing nothing about RequireJS and most of XWiki integrations surely doesIn’t help given the little time I can dedicate to XWiki, I often try to inspect whether something can be integrated, before deciding to spend time on it.
Your help is very much appreciated.

@mflorea

moment.js is already bundled in XWiki and you can simply ask for it

Cool, that worked indeed.

@mflorea

Gantt and snap.svg both support RequireJS (look for define( in their code) so you just have to tell RequireJS their paths

Almost… unfortunately I’ve hit another roadblock.

This is the code I’ve entered:

require.config({
  paths: {
    'Gantt': 'https://frappe.io/gantt/js/frappe-gantt.min',
    'snap.svg': 'https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min'
  }
});

require(['moment', 'Gantt', 'snap.svg'], function(moment, Gantt, snap) {
  var tasks = [
  {
	id: 'Task 1',
	name: 'Redesign website',
	start: '2016-12-28',
	end: '2016-12-31',
	progress: 20,
	dependencies: 'Task 2, Task 3'
  },
]
  console.log("Checking for moment lib: " + !!moment)
  console.log("Checking for Gantt lib: " + !!Gantt)
  console.log("Checking for snapsvg lib: " + !!snap)

  var gantt = new Gantt("#gantt", tasks);
});

This outputs:

Checking for moment lib: true
Checking for Gantt lib: true
Checking for snapsvg lib: true
Uncaught ReferenceError: moment is not defined
tasks frappe-gantt.min.js:1

in the console.

I tried with a url from CDN: https://cdnjs.cloudflare.com/ajax/libs/frappe-gantt/0.6.1/frappe-gantt.min

but got:

Checking for moment lib: true
Checking for Gantt lib: false
Checking for snapsvg lib: true 
Uncaught TypeError: a is not a constructor

but there’s no define() in this last file, it looks like there’s a difference between the libraries at the two urls.

This probably is an issue with the library itself: if that’s the case, is there any way to mix libraries loaded via RequireJS and added to the page with a <script /> tag?