Dear team
I have implemented an add-on which creates an extension page via tabs.create
When running extension in debug temporary extension mode everything works fine.
However when web-ext lint is executed I get errors on all pages containing import or exports.
I have changed manifest to contain page background.html in order for imports to run on background script and therefore runs ok with background scripts but what is the proper method for Extension pages (NOT content scripts)
Extension pages should just work with es modules. However, make sure to use relative URLs, so it works no matter the ID your extension gets. Further make sure to import your modules with an explicit <script type="module"> from the extension page. Further, the imports and exports have to follow the es module rules (imports have to come before any code).
Lastly, I wonder what errors the linter gives you, since normally they’re not per page but per script?
In my main.html page I have
< script type=“module” src=“main.js” >
In terms of relative urls I tried with both /admin/… and ./admin options with no luck
I get these kind of errors
JS_SYNTAX_ERROR JavaScript syntax error There is a JavaScript syntax error in your code; validation cannot continue on this administration/controllers/configController.js… 1 1
In the files themselves the imports are on the first line for example.
And like I specified when I run the extension in the temporary loading everything works fine and only fails when running either web-ext lint or web-ext sign
Could you paste here a piece of code?
I had a similar issue because my IDE was omitting “.js” postfix when importing modules, which needs to be there, for example:
Hi Juraj
I encountered that early on
These are examples of the offending lines
import GridController from “…/controllers/gridController.js”
export default class GridController {
Actually Martin
As I mentioned in previous comment this lint is incorrectly stating error is at import due to this I believe
“As I mentioned in my previous comment the actual error raised by espree is not logged anywhere, after that error happens we fall back to parse the file as a “script” instead of a “module” and so the linter will mark the first import or export as invalid syntax (which I absolutely agree that it makes this issue way more confusing).”
as per (https://github.com/mozilla/addons-linter/issues/2940)
I have corrected the underlying issues and most issues have gone away bar one.
Lint is ok with a normal import but seems to dislike dynamic imports ie
import(filepath).then(module=> {
You can of course dynamically inject script tags, however those tags can’t load module scripts. That’s all there is as far as I know. However since all the data is local either way there is not much gain in dynamically loading modules (apart from a few KBs of memory that aren’t used).