AMD Module moment.js loaded via require.js produces mistmatch error

AMD Module moment.js loaded via require.js produces mistmatch error

by Yamel Hall -
Number of replies: 3

I need to implement the daterangepicker.js library to a custom block plugin I am a building.

I am using this library:

https://raw.githubusercontent.com/dangrossman/bootstrap-daterangepicker/master/daterangepicker.js


This library has as dependencies, jquery, jquery UI &  moment.js. All of the dependencies but the last one are already loaded by require.js in moodle core. 

I am simply adding the library moment.js to the JavaScripts loaded by my theme via the config.php file.

Immediately I get the http://requirejs.org/docs/errors.html#mismatch error. 
Moment.js checks if require.js is present to load AMD modules if so it should be able to define the module and return the object. However, there is a problem that is not allowing the module to be defined.

Is there something different I should be doing to load the AMD module moment.js ?

I have tried with 2 themes, I used Clean theme without any javascript loaded to make sure any of my scripts were not the issue. It might be worth mentioning that I have used moment.js successfully in other frameworks.

Thank you for any provided help.

Average of ratings: -
In reply to Yamel Hall

Re: AMD Module moment.js loaded via require.js produces mistmatch error

by David Lowe -
Picture of Plugin developers

Did you ever get this working?

Thanks.

Average of ratings: -
In reply to Yamel Hall

Re: AMD Module moment.js loaded via require.js produces mistmatch error

by David Lowe -
Picture of Plugin developers

That's funny, I spent a good 2 hours trying to figure this out, posted here then figured it out 5 minutes later.

In my case I'm trying to require moment.js in a local plugin. My files are in local/[plugin_name]/amd/src/

Place the name of your plugin where you see [plugin_name] in my samples. 

To start my local plugin in index.php it includes 1 javascript file:

$PAGE->requires->js_call_amd('local_[plugin_name]/some_javascript_file', 'init');

In my some_javascript_file.js I use bootstrap-datetimepicker which needs moment.js so my define looks like this:


define(['jquery', 'local_[plugin_name]'/bootstrap_datetimepicker'], function ($, datetimepicker) {

   return {

      ....other functions here

      init: function () {

         ....whatever code here....

      }

});


Now when require goes to get datetimepicker it is going to look in local/[plugin_name]/amd/src/bootstrap-datetimepicker.js

The bootstrap-datetimepicker will then require moment.js but won't find it.

I believe this is because it's the way Moodle (or require?....not sure) handles locations. So in my bootstrap-datetimepicker.js file 

where it calls the define I had to add the path to moment.

define(['jquery', 'local_[plugin_name]/moment'], factory);

instead of it's default of:

define(['jquery', 'moment'], factory);

and voila, it works. It's not ideal because now that means I have to change files that I never want to touch..........oh well, at least it's working for now.

HTH

Average of ratings: -
In reply to David Lowe

Re: AMD Module moment.js loaded via require.js produces mistmatch error

by Henrik Thorn -

You can avoid changing files by adding paths to your requirejs, which is added just above your "some_javascript_file" define statement. 


requirejs.config({
  paths: {
    "moment": "[theme_something]/moment"
  }
});

Average of ratings: -