JavaScript syntax error in addon validation results

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

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

1 Like

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.

Where it was most likely still transpiled with babel.

1 Like

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?

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.

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>

it is happening to me as at 2020

The linter doesn’t understand class fields syntax https://github.com/mozilla/addons-linter/issues/2758#issuecomment-635969436

So I can’t publish my addon

If you are using unsupported features and you don’t want to remove them, then as a workaround you can use Babel to generate “old” javascript files from your source files.
Or use TypeScript, that should help too even if your code is not TypeScript :slight_smile:.

i have tried but it gives me the same error line one syntax problem and i have changed it to the oldest one i could see on Babel

Try to use their online REPL:

Paste the code there and copy the result.

thank you I am going to try it

i have gone there and it still did not work

But then there must be some other validation error, because as you can see, it will correctly remove the private fields from the result javascript.