• Home
  • Categories
  • Recent
  • Popular
  • Top
  • Tags
  • Users
  • Groups
  • Documentation
    • Home
    • Read API
    • Write API
    • Plugin Development
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
v3.5.2 Latest
Buy Hosting

Loading external scripts with requirejs

Scheduled Pinned Locked Moved NodeBB Development
6 Posts 4 Posters 8.8k Views
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • BriB Offline
    BriB Offline
    Bri Community Rep
    wrote on last edited by Bri
    #1

    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>
    
    1 Reply Last reply
    0
  • julianJ Offline
    julianJ Offline
    julian GNU/Linux
    wrote on last edited by
    #2

    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
    });
    
    1 Reply Last reply
    0
  • psychobunnyP Offline
    psychobunnyP Offline
    psychobunny
    wrote on last edited by
    #3

    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!

    1 Reply Last reply
    0
  • BriB Offline
    BriB Offline
    Bri Community Rep
    wrote on last edited by
    #4

    @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

    1 Reply Last reply
    0
  • BriB Offline
    BriB Offline
    Bri Community Rep
    wrote on last edited by
    #5

    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....

    1 Reply Last reply
    0
  • Mahesh EmbadiM Offline
    Mahesh EmbadiM Offline
    Mahesh Embadi
    wrote on last edited by
    #6

    i have the same issue , I have tried like below
    require(['https://booking.test.com/bundles/WidgetV2Loader.js']);

    in requirejs file I have the below code
    function scripts() {
    return document.getElementsByTagName('script');
    }
    if we remove this from requirejs file my eternal script is working fine, But some other exsisting functionalites are not working?

    1 Reply Last reply
    0

Copyright © 2023 NodeBB | Contributors
  • Login

  • Don't have an account? Register

  • Login or register to search.
Powered by NodeBB Contributors
  • First post
    Last post
0
  • Home
  • Categories
  • Recent
  • Popular
  • Top
  • Tags
  • Users
  • Groups
  • Documentation
    • Home
    • Read API
    • Write API
    • Plugin Development