Loading external scripts with requirejs

[Bri]

Hey @psychobunny , I was trying to load this datatables library to use in an admin panel, but I get conflicts when a call to require() is made. I did some digging and it looks like there's a conflict with the library somewhere because I get this message:

Uncaught Error: Mismatched anonymous define() module: function (h){var j=function(e){function o(a,b){var c=j.defaults.columns,d=a.aoColumns.length,c=h.extend({},j.models.oColumn,c,{sSortingClass:a.oClasses.sSortable,sSortingClassJUI:a.oClasses.sSor...<omitted>...ch require.js:8
B require.js:8
M require.js:15
d require.js:26
requirejs require.js:31
(anonymous function) (index):267

where line 267 is the call to require in the footer (forum/admin/footer).

I was looking at how you can add external resources to requirejs, but it looks like you have to make a call to require.config({... paths: "blah"}); to add it. I didn't want to do that because I don't want to mess with core. I found this (down at the bottom) which looked like it used the define function to pull some external resource in on the fly, but that's the only place I ever saw that example.

Code:

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min.js"></script>
...
<script type="text/javascript">
	require(['forum/admin/footer']); // <-- crashes here
</script>

[julian]

Hey @BDHarrington7, I moved this to NodeBB Development, as it seems more fitting.

Looks like there's no facility right now to add paths to the require.js declaration, although it does seem like something that would be useful.

Right now, it checks /public/src/modules by default, and if it starts with "forum", checks /public/src/forum. We could expose a hook for you to add more objects to this array, so you can do something like:

paths.concat([
    "datatables": "//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min.js"
]);

... and then

require(['datatables'], function(dt) {
    // some code here
});

[psychobunny]

Does this help you out @BDHarrington7 ? Lines 5-7
https://github.com/psychobunny/nodebb-plugin-category-info/blob/master/static/js/lib/main.js

The error you are getting above happens when you directly embed a lib that uses requirejs (ex. via scripts.get hook). Just leave it in your static dir and require it like how I do in the above plugin Good luck!

[Bri]

@psychobunny I tried that and got the script to load when I'm in the main application, but I need it loaded in the admin side. @julian, I got a working version of using datatables with requirejs, but for some reason jquery is being requested from /public/src/modules when this is run:

// initialize datatables
	var table = $('#dataContainer');
	require.config({
		paths: {
			datatables: "//cdn.datatables.net/1.10-dev/js/jquery.dataTables"
		},
		shim: {
		 	'datatables': ['jquery']
			
		 }
	});
	require(['datatables'], function(){
		
		table.dataTable({
			"aoColumns": [
				{ "sTitle": "Name", "mData": "name" },
				{ "sTitle": "Description", "mData": "description"}

			]
		});
	});

this works fine in a jsfiddle but I noticed that the jquery file was being requested from /src/modules/jquery.js, when I use the require call.

I also noticed that this same error can be reproduced if jquery is loaded before require like in this jsfiddle

[Bri]

I tried switching the require.js script tag to be the first one loaded, in the admin/header.tpl file, and sure enough the datatables jquery plugin loaded fine. Unfortunately some other javascript crashed, one of them was the jquery.timeago javascript....