Using moment.js with requireJS

Hi, I’m trying to use chart.js and moment.js using requireJS, but I always get the following error:

Error: Chart.js - Moment.js could not be found! You must include it before Chart.js to use the time scale. Download at https://momentjs.com

I can use Chart.bundle.js and it works but I can’t use moment from it, so I need to import it independently.

I’ve tried to find any example on the web without success. And the docs says that:

The Chart.bundle.js and Chart.bundle.min.js builds include Moment.js in a single file. This version should be used if you require time axes and want a single file to include, select this version. Do not use this build if your application already includes Moment.js. If you do, Moment.js will be included twice, increasing the page load time and potentially introducing version issues.

But the examples in the repository import it twice…

<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="../../dist/Chart.bundle.js"></script>

Thanks

Author: Fantashit

4 thoughts on “Using moment.js with requireJS

  1. Here is a workaround for requireJS which doesn’t involve modifying chartjs.

    Create moment-fix.js which pre-loads moment.js and adds it to the global scope.

    /*
     * moment-fix.js
     *
     * Assign reference to moment at global scope to let ChartJS use window.moment.
     */
    
    define(['moment'], function (moment) {
        // assign moment to global window object
        window.moment = moment;
    });
    

    Setup a shim in your requireJS configuration to load moment-fix before chartjs.

    require.config({
        waitSeconds: 0,
        shim: {
            'chartjs': {deps: ['lib/chartjs/moment-fix']},
            'bootstrap': {deps: ['jquery']}
        },
        paths: {
            'jquery': 'lib/jquery/jquery-2.2.3.min',
            'bootstrap': 'lib/bootstrap/bootstrap',
            'cookies': 'lib/cookie/js.cookie',
            'i18next': 'lib/i18n/i18next.amd-1.11.1.min',
            'moment': 'lib/moment/moment-config',
            'chartjs': 'lib/chartjs/Chart'
        }
    });
    
  2. @zachpanz88 Pretty sure this issue still exists. The requirejs shim solution is alright, but making the factory pattern logic more robust still seems like the right permanent fix.

  3. This problem happens to me at src/scales/scale.time.js on line 7
    moment = typeof(moment) === ‘function’ ? moment : window.moment;
    when I tried to use time series on XAxis.
    Console.log the moment object I can see that moment variable is a es6Module as below, whose default is a function and what the file actually wants.
    console.log(moment) -> {__esModule: true, default: ƒ}
    Currently typeof(moment) === ‘function’ returns false and moment points to window.moment which is undefined. Hence the error “Chart.js – Moment.js could not be found!”.

    Solution:
    Update the line in node_modules/chart.js/src/scales/scale.time.js to below works for me.
    moment = typeof(moment.default) === ‘function’ ? moment.default : window.moment;

    Comment:
    I’ve seen this error frequently when one module “require” an es6 module in an es5 way. “Import” should work fine without the “.default”. Please comment if I’m wrong.

    Versions:
    chart.js@2.6.0
    moment@2.18.1

  4. I removed all usage of momentjs in favor of date-fns in my Angular 5 (+ angular-cli) app only to realize that Chartjs depends on Momentjs.

Comments are closed.