How to import ES6 modules inside the extension?

I have the problem that when I try to load my js file as a module in the html of my addon page:
<script type="module" src="overview.js" ></script>

The following error message appears in the console:

Loading failed for the module with source "moz-extension://ebc25a3d-2288-4ded-9231-dd35ba5cb1da/storageService".

The error only occurs when I try to import my other local js module at the beginning of the overview.js file:
import { StorageService } from './storageService';

Thats the way I export this function:
export function StorageService() {...}

The file of the other module is located in the same folder.
Iā€™ve been searching the internet for an hour and canā€™t find a solution, did I miss something?
I am new to addon development

If you copied & pasted these lines:
ā€œ.jsā€ is missing after ā€œ./storageServiceā€

2 Likes

Now it works, I had actually already tried it that way, but there was probably something wrong elsewhere.
Thanks a lot

I just reloaded the addon again, meanwhile it doesnā€™t work after all. Maybe it was still cached before.
I think the easiest solution is to develop the addon completely in one file lol

Donā€™t develop it in a single file :slightly_smiling_face: unless itā€™s extremely small addon.
Modules are encapsulated and can be shared between different contexts. It will also help you keep your code more maintainable.

But Firefox error logging is currently extremely buggy and I would even say totally broken for addons development - missing errors [1, 2], old errors, not reloading, wrong reloadingā€¦ just pure hell.

So even though it pains me to say it, itā€™s much better to use Chromium for fixing errors like these. And thanks to web-ext, you can now test your addon in Chromium easily with:

web-ext run -t chromium

One issue though, you need to use webextension-polyfill for Chrome if you want to use browser namespace.

EDIT:
Alternatively, Firefox ESR 91 is not affected by the recent bugs, only by the memory leak but thatā€™s manageable :slight_smile: .

web-ext run --firefox="C:\Program Files\Mozilla Firefox ESR\firefox.exe"
1 Like