moment.js is not loading before chart.js in Firefo

Question

I am porting a Chrome extension to Firefox and it adds Chartjs charts to a page. It requires moment.js and works great on Chrome. However, when I port it to Firefox, the charts don't load and I get an 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

My manifest.json has the content scripts in the order they need to load, but Chartjs can't seem to 'find' moment js when the charts are populated.

"content_scripts": [
    {
        "matches": [
            "<site this should be active on>"
        ],
        "css": [
            "main.css"
        ],
        "js": [
            "jquery.js",
            "moment.js",
            "chartjs.js",
            "main.js"
        ]
    }
]

I've hunted and hunted on Google to no luck. Please help!

Answer 1

Update: with help of a Chart.js contributor we've confirmed that it's a bug with Chart.js' way of loading things, see this comment and above for details. So below workaround is probably as good as it gets for now.

---

I ran into the same issue, and I made a bug report for it on the Chart.js repository. I also found a workaround, which is to add this to moment.min.js when building/packing your extension:

// Minified momentjs code on this line;
window.moment = moment;

In my case I use Powershell to dump files into a build folder:

Remove-Item build -Recurse -Force -Confirm:$false
mkdir build

Copy-Item node_modules/moment/min/moment.min.js build/
Copy-Item node_modules/chart.js/dist/Chart.js build/
Copy-Item src/js/app.js build/app.js
Copy-Item manifest.json build/manifest.json

# Workaround for: https://stackoverflow.com/questions/51948350/
# See also: https://github.com/chartjs/Chart.js/issues/5901
Add-Content -Path build/moment.min.js -Value "`n`nwindow.moment = moment;"

Not really a solution or answer, but useful enough to post I suppose...