The Firefox extension is experiencing an issue with loading moment.js before chart.js

I've been working on porting a Chrome extension to Firefox that includes Chartjs charts on a page. It runs perfectly on Chrome, but I've encountered an issue when trying to transition it to Firefox. The charts fail to load and an error message displays:

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

Even though my manifest.json file has the content scripts listed in the correct order for loading, Chartjs seems unable to locate moment js when populating the charts.

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

I've searched extensively on Google for a solution but have had no luck. Any help would be greatly appreciated!

javascriptfirefox-addonchart.jsmomentjs

Answer №1

Update: After collaborating with a Chart.js contributor, we have identified a bug in the way Chart.js is loading elements. More information can be found in this comment and the one above it. As of now, the workaround provided below seems to be the best solution available.

Encountered the same issue and submitted a bug report on the Chart.js repository. Additionally, I discovered a workaround by adding the following code snippet to moment.min.js during extension building/packing:

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

In my scenario, I utilize Powershell to transfer files to a build directory:

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;"

Although not a definitive solution, this workaround proves to be quite useful to share...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why does a Vue component throw errors prior to being rendered?

In the Home view, there are two components: Filter and Results. The Results component relies heavily on data from the vuex store, which is influenced by the Filter component. Once the filters are applied and the user interacts with Filter, the necessary da ...

javascriptvue.jserror-handlingvuex

Question from Student: Can a single function be created to manage all text fields, regardless of the number of fields present?

In my SPFX project using React, TypeScript, and Office UI Fabric, I've noticed that I'm creating separate functions for each text field in a form. Is there a way to create a single function that can handle multiple similar fields, but still maint ...

javascriptreactjstypescript

What could be causing the controller to malfunction when the script is placed outside of the index.html file?

I find myself caught up in a dilemma. Whenever I attempt to replicate the tutorial from , by copying and pasting the code below: <html ng-app="myApp"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/a ...

javascriptangularjsangularjs-controller

Non-functioning Tooltips on Google Charts

Currently, I am working on integrating Google Chart with ASP.NET and linking it to a SQL Server database. I have encountered an issue while attempting to customize the tool tip. Below is the Header Code: <script src="js/jquery/jquery-1.10.2.js" type=" ...

javascriptjquerysql-serverjsongoogle-visualization

Injecting a component in Angular 2 using an HTML selector

When I tried to access a component created using a selector within some HTML, I misunderstood the hierarchical provider creation process. I thought providers would look for an existing instance and provide that when injected into another component. In my ...

javascripthtmlangulartypescript

Identifying Whether Angular ng-repeat is Displaying Output or Not

I am trying to display a "No result" message when the search field does not have any matches. The current filter is working fine, but it does not show the message when there are no results. How can I achieve this? <div class="portfolio-list-wrap" ng-co ...

javascriptangularjs

Is there a way for me to make the login button redirect to the Dashboard?

I'm currently working on a piece of code where I need to implement some form of validation when the user clicks on the sign-in button. Specifically, I want to ensure that both the username and password fields are not left empty. If this condition is m ...

javascriptreactjsreact-nativesnackjs

The revised document now exceeds 16,777,216 in size

When attempting to add new data to an array using mongoose, I encountered two errors. Here is the code snippet in question: return await db.fileMeta.findOneAndUpdate({ username: username, 'files.fileUID': { $ne: data.fileUID } ...

javascriptmongodbmongoosemongoose-schema

Encountering an issue with Angular directive attributes

I am attempting to create an angular directive that will extract a substring from a passed-in attribute. Below is the code I have written: HTML: <body ng-controller="MainCtrl"> <div><substring message="This is a test."></substri ...

javascriptangularjs

Finding the iframe document on Chrome

I've been attempting to dynamically adjust the height of an iframe based on its content, but I'm facing issues in the latest version of Chrome. In Chrome, 'doc is undefined' error is showing up. Surprisingly, everything works perfectl ...

javascriptgoogle-chrome

In Vue JS, ensure that each item is loaded only after the previous item has finished loading

Is there a way to optimize the loading of around 1000 static images, .gifs, and videos for an online slideshow presentation? Currently, all items are loading simultaneously causing viewers to wait to see the first item. How can each item be loaded after th ...

javascriptperformancevue.jsvuetify.jspreload

If you don't get the correct response from the $.ajax success function

I am utilizing the $.ajax function to retrieve content, however I am encountering an issue when attempting to display special tags from it. The data appears to be missing! This is how I am currently handling it: $(document).ready(function(){ $("button") ...

javascriptjqueryajax

js problem with assigning the expression result of a regex operation

Let's talk about a JavaScript string scenario: "h" + "e" + "l" + "l" + "o" This particular string is extracted from a regex query, enclosed within [..], and here's how I'm isolating it: var txt = '"blahblahblah["h"+"e"+"l"+"l"+"o"]fo ...

javascriptregex

Continual dark mode throughout page navigation with the ability to switch between light and dark modes

I've been experimenting with creating a persistent dark mode feature for web pages. My goal is to remember the user's preference as they navigate between pages. Additionally, I included a toggle button for switching between dark and light modes t ...

javascripthtmlcss

Angular debounce on checkboxes allows you to prevent multiple rapid changes from

Managing multiple checkboxes to filter a dataset can be tricky. I am looking for a way to debounce the checkbox selection so that the filter is only triggered after a certain period of time, like waiting 500ms to a second after the last checkbox has been c ...

javascriptangularjs

What is the reason my hyperlinks are not clickable?

I'm working on a project that checks if a Twitchtv user is live streaming and provides a link to their page. The streaming part is working correctly, but I'm having trouble making the username clickable. Even though the URL is valid and the page ...

javascriptjqueryhtmltwitch

intricate pattern matching tool for Angular

Can someone help me create a regular expression that can validate input in the format "S19/999999/090"? I need the input field to accept this specific type of input where the first character is an uppercase letter from A to Z, followed by two digits from 0 ...

javascriptjqueryregexangularvue.js

Tips for designing a customizable color scheme for your website

Are you looking to implement a changeable color scheme for your website? Getting started can be daunting, especially if you're unfamiliar with sass. Would appreciate it if anyone could share some helpful tutorials or links? For example: example ...

javascriptcssbootstrap-4

Troubleshooting HTML/JavaScript with JSP and JSTL: iPhone only displaying the first option in select dropdown, rather than the selected option

My HTML includes a <select> element: <select id="mySelect"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> ...

javascriptjqueryhtmljspjstl

The size of the popup does not align properly with the content within it

After creating an extension for Chrome, I specified the dimensions of the popup to be 600 x 300 px. Everything was working perfectly until Chrome updated to version 27. As shown in the screenshot, I set the width and height using CSS, but there is still a ...

javascripthtmlcssgoogle-chromegoogle-chrome-extension