If use "webextension-polyfill" in project. Extension has error. "Uncaught SyntaxError: Cannot use import statement outside a module"

[xiaoxinbo118]

Steps:

1. npm install webextension-polyfill.
2. Content and background use webextension-polyfill.
3. "import" codes in the builded soure.
4. Install the extension, "Uncaught SyntaxError: Cannot use import statement outside a module" in background.
   Question:
   How to use common module without "import"?

[github-actions]

Thank you for your contribution. We will check and reply to you as soon as possible.

[Jonghakseo]

Could you please provide a more detailed reproduction of the issue? I hope i can help you.

I tried with the following process but couldn't reproduce the problem.

1. yarn install webextension-polyfill
2. import polyfill from "webextension-polyfill"; in background/index.ts
3. install extension
4. run (it's work)

import reloadOnUpdate from "virtual:reload-on-update-in-background-script";
import polyfill from "webextension-polyfill";

reloadOnUpdate("pages/background");

console.log("background loaded");
console.log("polyfill", polyfill);

[rajatkapoor]

I also face this issue on including this in the content Script. Or for including any external package in the content script for that matter

I saw your comment regarding how that might not be possible, but is there any workaround? I have definitely seen extentions using the webextension-polyfill in the content scripts and would really appreaciate any help in using that in this template.

[Jonghakseo]

The usage of webextension-polyfill seems to be detailed in the repo below.
It's hard to pinpoint exactly what the issue is 😢

https://github.com/mozilla/webextension-polyfill

[caperso]

Solved this by adding type: 'module'

[Jonghakseo]

This issue has been closed for a long time with no additional information provided. If anyone encounters the same issue, you can re-open it with your running environment and error logs attached.