Forum Discussion

ArchiveUser's avatar
ArchiveUser
Qrew Captain
8 years ago

Use an updated version of moment.js

I'm trying to use an updated version of moment.js.  QB currently pulls in version 2.8.4 with requirejs, and the moment.js docs recommend upgrading to at least 2.14.0 or above for the best experience.  There are some features of the latest version I'd like to use that don't work in the version QB is using.  I'm trying to unload the version QB pulls in with require and use the latest version via the image onload technique with a $.getScript call but no dice so far.  Any thoughts on how to get around this?  

Thanks! 
  • Show the code you are using the the URL of moment 2.14.0 you want to use.

    The various libraries QuickBase uses can be loaded globally through the use of <script> or if they are AMD modules through the requirejs loader. QuickBase developers typically load their supplemental scripts they need through jQuery's getScript() method simply because doing so is concise. But overall it is a small mess as there isn't a unified way to load script and some libraries do loader detection and will not load through getScript() if they detect that requirejs is being used (this is probably what you are experiencing). Other libraries can be loaded globally using <script>, through AMD or through CommonJS. This is very frustrating working this out on a new library that does not load.

    Luckily browsers will soon support native module loading through the import keyword and a lot of this nonsense will go away (although the version of QuickBase we are now using may never adopt using import because of the parallel development of Mercury - who knows). See

    https://jakearchibald.com/2017/es-modules-in-browsers/
  • Dan, thanks for the speedy response and the great info!  

    The code I'm using to pull in the latest version of moment.js is as follows:

    $.getScript('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js',function() {     var now = moment();      console.log(now); })
    Just wanted to test to make sure I could access the moment function, but I get a "moment is not defined" error.  
  • Look at the library you are attempting to use and focus on the first few lines and their closing syntax:
    ;(function (global, factory) {
        typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
        typeof define === 'function' && define.amd ? define(factory) :
        global.moment = factory()
    }(this, (function () { 'use strict';
      //lots of code
    })));
    https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js

    This library is coded using the so-called UMD (Universal Module Definition) pattern which attempts to unify (1) Global, (2) AMD (Asynchronous Module Definition) and (3) CommonJS (Common JavaScript) module loaders into one universal format. Unfortunately it uses some very weird JavaScript that even experts would stumble over understanding unless they wrote it themselves. See this article for an explanation of UMD:

    http://davidbcalhoun.com/2014/what-is-amd-commonjs-and-umd/

    I think if you comment out the following two lines you can use the library as a global script loaded using $.getScript()
    ;(function (global, factory) {
        //typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
        //typeof define === 'function' && define.amd ? define(factory) :
        global.moment = factory()
    }(this, (function () { 'use strict';
      //lots of code })));
    This implies you copy the file form the CDN and host it as a code page within QuickBase. I will test this myself later but I don't have the time at the moment (that's a pun!).
  • This took less time than I thought. I tested it and adding the two comments fixed the problem. Here is the console session and a screenshot:
    $.getScript("https://haversineconsulting.quickbase.com/db/bmrpn5xrr?a=dbpage&pagename=moment.js",functio... {
        var now = moment(); 
        console.log(now);
    });
    Uncaught ReferenceError: moment is not defined
        at Object.success (<anonymous>:2:15)
        at o (jquery-1.7.2.min.js:2)
        at Object.fireWith [as resolveWith] (jquery-1.7.2.min.js:2)
        at w (jquery-1.7.2.min.js:4)
        at XMLHttpRequest.d (jquery-1.7.2.min.js:4)
    $.getScript("https://haversineconsulting.quickbase.com/db/bmrpn5xrr?a=dbpage&pagename=momentMODIFIED.js"... {
        var now = moment(); 
        console.log(now);
    });
    Object {readyState: 1, setRequestHeader: function, getAllResponseHeaders: function, getResponseHeader: function, overrideMimeType: function...}
    Moment {_isAMomentObject: true, _isUTC: false, _pf: Object, _locale: Locale, _d: Fri May 05 2017 19:14:33 GMT-0400 (Eastern Daylight Time)...}



    Actually I am very glad you asked this question. I know a lot of people have attempted to load libraries and been turned off on using script because of this problem. Even if you know what the problem is it can still be tricky as many library authors do not unambiguously announce how their libraries are to be loaded (many authors smuggly assume AMD or CommonJS and ignore conventional global loading) and use their own weird module loading logic (the UMD pattern is far from being universally adopted)
    • ArchiveUser's avatar
      ArchiveUser
      Qrew Captain
      Ah, you beat me to the test.  This is the first library I've had an issue loading.  I use underscore quite frequently with no issues, so I was thrown as to why this one was a problem.  Thanks for shedding the light!  Really, really appreciate the help and insight.  
  • (heh heh)

    I just tested it myself, and commenting out those two lines actually did work.  You, sir, are a master.  Thank you for the reading material as well - I'm familiar with everything you mentioned above with the exception of the UMD pattern.  Lot of learning to do.  

    THANK YOU AGAIN!  You da bomb.  
  • I was having trouble pasting the code and with your comment lost the ability to edit the original reply (it is the way the forum works unfortunately). Here is the essence of the code:

    //no works
    $.getScript("https://haversineconsulting.quickbase.com/db/bmrpn5xrr?a=dbpage&pagename=moment.js",functio.... {
        var now = moment(); 
        console.log(now);
    });
    Uncaught ReferenceError: moment is not defined

    //works
    $.getScript("https://haversineconsulting.quickbase.com/db/bmrpn5xrr?a=dbpage&pagename=momentMODIFIED.js".... {
        var now = moment(); 
        console.log(now);
    });
    >You da bomb.

    All Your Base Are Belong To Us
    https://www.youtube.com/watch?v=qItugh-fFgg


    In A.D. 2101 
    War was beginning... 
    * explosion * 
    Captain: What happen? 
    Mechanic: Someone set up us the bomb! 
    Operator: We get signal! 
    Captain: What? 
    Operator: Main screen turn on! 
    Captain: It's you! 
    Cats: How are you gentlemen? 
    Cats: All your base are belong to us! 
    Cats: You are on the way to destruction! 
    Captain: What you say? 
    Cats: You have no chance to survive make your time! 
    Cats: Ha ha ha... 

    All your base 
    Your base 
    Base 
    Base 
    All your base 
    Are belong to us 

    All your base 
    Your base 
    Base 
    Base 
    All your base 
    Are belong to us 

    All your base 
    Your base 
    Base 
    Base 
    All your base 
    Are belong to us 

    All your base 
    Your base 
    Base 
    Base 
    All your base 
    Are belong to us 

    All your base 
    Your base 
    Base 
    Base 
    All your base 
    Are belong to us 

    All your base 
    Your base 
    Base 
    Base 
    All your base 
    Are belong to us 

    * instrumental verses * 

    All your base 
    Your base 
    Base 
    Base 
    All your base 
    Are belong to us 

    All your base 
    Your base 
    Base 
    Base 
    All your base 
    Are belong to us 

    * instrumental * 

    For great justice 

    Take off every zig 
    Move zig 
    Move zig 
    Move zig 
    Move zig 
    You know what you doing 
    Take off every zig 
    Move zig 
    Move zig 
    Move zig 
    Move zig 
    You know what you doing 
    Take of every zig 
    Move zig 
    Move zig 
    Move zig 
    Move zig 
    For great justice 
    Take off every zig 
    Move zig 
    Move zig 
    Move zig 
    Move zig 
    You know what you doing 
    Take off every zig 

    * instrumental verses * 

    All your base 
    Your base 
    Base 
    Base 
    All your base 
    Are belong to us 

    All your base 
    Your base 
    Base 
    Base 
    All your base 
    Are belong to us 

    All your base 
    Your base 
    Base 
    Base 
    All your base 
    Are belong to us 

    All your base 
    Your base 
    Base 
    Base 
    All your base 
    Are belong to us 

    * insrumental verses * 

    Moooooooooooooove ziiiiiiiiiiiiiiiiiiiiiiiiiig! 

    * explosion * 

    Base * repeated * 
    You have no chance to survive make your time!
  • I can't believe someone took the time to type out the lyrics to that.  Best. Response. Ever.