RequireJS error loading 3rd party library

I'm trying to use the Chart.js library in one of my plugins.  According to the documentation for Chart.js, it can be used like so:

// Using CommonJS
var Chart = require('src/chart.js')
var myChart = new Chart({...})

I followed the directions at http://learn.elgg.org/en/2.0/guides/javascript.html under "Setting the URL of a module".  I've copied the Chart.min.js file to mod/myplugin/vendors/js/ChartJS/Chart.min.js.  Then I added a 'views.php' in mod/myplugin/ which looks like:

<?php // views.php
return [
  'Chart.js' => __DIR__ . '/vendors/js/ChartJS/Chart.min.js',
];

In another js file that gets loaded (correctly) on a particular page, I have this:

define(function(require) {
    var Chart = require('Chart');
   // some other JS which works fine follows
});

The require('Chart') bit throws a generic RequireJS error ('Script error for "Chart", needed by myplugin/testing').

Is there anything obvious I'm doing wrong here?

  • Search the community. I have answered this before. You need to define exports

  • Thanks Ismayil, I appreciate your help.  I had searched but didn't find anything relevant.  After your post above I searched on 'exports elgg_define_js' and found your comment here: https://elgg.org/discussion/view/2556883/javascript-in-elgg-11212

    So I tried that approach:

    elgg_define_js('Chart', [
            'src' => 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js',
            'deps' => ['jquery'],
            'exports' => 'Chart',
    ]);
    

    This works great!  So again, thank you.

    The only thing that I'd like to do is change 'src' so it points to the local version of the library instead of the CDN.  I tried various formats for 'src' to refer to the version in mod/myplugin/vendors/js/ChartJs/Chart.min.js, but all resulted in the same RequireJS script error.  Can the 'src' parameter point to a local path?

  • Have a look at https://github.com/nlybe/Elgg-ChartsAPI to see how Chart.js is integrated in Elgg.

    Or you can just use this plugin

  • Josh, the src can point to a local URL (relative to site root or absolute). The best approach is to use views.php file in your plugin's root and register vendor assets as views. You can then use their simplecache URL (elgg_get_simplecache_url()). Vendor APIs that do not export global variables can then be even used without elgg_define_js(), you just simply require the JS script as an AMD module. There should be more in Elgg docs.

  • @nikos - thanks, man!  I'll take a look and see if this lets us do what we want.  If not, it's still great to see a plugin that has an example of how others tackled a similar problem.

    @Ismayil - I finally got the views.php approach working properly (I had previously left out the 'defaults' parameter in the array, and instead just specified 'Chart.js' in its place).  Thank you for pointing me to the Views documentation; I was looking only in the Javascript docs and never would have found the answer there.  Registering my JS asset in views.php is a very clean solution -- one that I wish I had known about much earlier!

     - Josh

  • Care to make a PR to update the docs with a working solution as an example of JS/views usage?