JavaScript syntax error in addon validation results

Add-ons Development
#1

I made an update to my WebExtension https://github.com/Skeletonxf/duplicate-tab and tested it using Firefox Develper Edition. In Firefox Developer Edition it loads fine and works as expected, however when I came to upload it as a new version I was met with two "JavaScript syntax error"s in the code and am not able to upload the new version.

Error: There is a JavaScript syntax error in your code; validation cannot continue on this file.
background/duplication.js line 1 column 1

Error: There is a JavaScript syntax error in your code; validation cannot continue on this file.
core/script.js line 65 column 9

I am pretty confident these are not syntax errors because the code loads without any errors or problems when I load the same zip file as a temporary addon in Firefox Developer Edition?

The zip file can be accessed here: https://github.com/mozilla/addons-linter/files/3525447/duplicate-tab.zip
I created an issue on the addons linter but got no replies https://github.com/mozilla/addons-linter/issues/2758

#2

I’d think it’s because you’re using class fields, which is a rather new feature to Firefox (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Class_fields#Browser_compatibility) and I’m not even sure how that covers arrow functions as class field value.

Either way, you’d probably have to check your browser versions, plus AMO/addons-linter possibly isn’t aware yet that this is syntax understood by Firefox. The easy way is to move them to the constructor for now, so they’re not class fields.

The syntax error in the import is how imports with errors in them behave (the import statement throws the error that is found while parsing the file that’s trying to be imported).

#3

Thanks. I first saw this syntax in a Node.js environment and just assumed it was ES6 and well supported. I will try moving the functions into the constructor and respond again once I find out how the linter handles the changes.

#4

Where it was most likely still transpiled with babel.

1 Like
#5

Hi thanks for the help. Moving the class fields into the constructor solves the second false positive but not the first.

I am still getting errors on line 1 column one here:

I tried adding a semicolon to the end of the first line but that did not fix the issue. I’m guessing the linter isn’t able to handle the import statement? Most code examples on MDN do not use background pages with JavaScript imports/exports. The prior versions of my own addon that uploaded to AMO fine also were not using the import or export keyword so perhaps this hasn’t been considered yet?

#6

As far as I’m aware the linter is able to handle modules when they are properly used with a script type=“module”, which you seem to be doing. As I tried to mention, this may actually be an error from the script it’s importing and not from the import statement itself.

Though then running it in Firefox should lead to a similar error.

#7

I am still getting no errors in the browser console on Developer Edition?

My background page is

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script type="module" src="/background.js"></script>
  </head>
</html>