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!
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...