Linter fails on await import

[jumbosushi]

Describe the problem and steps to reproduce it:

I have a following code in my extension as content script.

// Loads contentMain.js which loads all other js files
(async () => {
  const src = chrome.runtime.getURL('src/js/contentMain.js');
  const contentScript = await import(src);
  contentScript.main();
})();

What happened?

When I try to load the extension. the linter fails at import

What did you expect to happen?

Linter to pass

Anything else we should know?

The extension is this

(Please include screenshots and any relevant files.)

[EnTeQuAk]

Unfortunately await import is currently a stage-3 proposal and thus not supported by our parsing library.

We'd have to port to use https://github.com/babel/babel-eslint/ or similar to add support for this. I'm unclear about whether this is something we want to do.

cc @rpl for a second opinion.

[rpl]

@EnTeQuAk I took a quick look on bugzilla and searchfox for the actual status of the dynamic import on Firefox (and if there are known issues when using it in a WebExtension):

• the dynamic import is disabled by default in Firefox 66 release builds, it has been recently turned on for all the channels, starting from Nightly Firefox 67: Bug 1517546 - Enable dynamic module import by default

• the dynamic import seems to have currently issues when called from a WebExtensions content script:
  Bug 1536094 - Problem with dynamic module import in web extension

And so it seems to me that allowing its usage on the linter side may not be yet worth it, as it wouldn't be enough.

We could allow the dynamic import to be used in extension pages (basically every extension context besides the content scripts) for extensions that are going to require Firefox 67 as the strict_min_version in their manifest, but we should probably look into fixing Bug 1536094 before we can allow its usage everywhere (including the content script).

[EnTeQuAk]

Marking this as p4 then, as support will most certainly propagate once that feature is lifted out of stage 3.

[asamuzaK]

Now stage 4
Dynamic import (import()) to stage 4, per 2019.06.04 TC39 + editor … · tc39/proposals@b04295f

[stale]

This issue has been automatically marked as stale because it has not had recent activity. If you think this bug should stay open, please comment on the issue with further details. Thank you for your contributions.

[pdehaan]

Is this still in stage 4?
(take that, stale bot!)

[Riajyuu]

I believe so.
See
https://tc39.es/proposal-dynamic-import/

[Jack-Works]

We're going to move our background page from webpack to ES Module but it seems I can't do it now because it will not pass this linter. watch on this issue

[donbidon]

My Buddah! Over 1 year ago bug was opened, still no progress. I cannot sign my extension.

[donbidon]

I like to use dynamic import, so I had to do:
"manifest.json":
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
code:
let {foo, bar, ...} = await eval('import("/path/to/file")');
but it looks like perversion (

[Jack-Works]

@donbidon but how? Firefox doesn't support dynamic import in content script
https://bugzilla.mozilla.org/show_bug.cgi?id=1536094

[crimx]

I made a webpack 4 plugin webpack-target-webextension that supports code-splitting with native dynamic import and with tabs.executeScript as fallback.

I also have a workaround solution for Firefox so that the dynamic import logic will be skipped.

Currently I just replace the import with other name to bypass the linter. It would be nice that the linter could just give warning instead of error out.

[Jack-Works]

For anyone interested, I also made a SystemJS fork for WebExtension (https://github.com/Jack-Works/webextension-systemjs)

System JS is a fully ES Module compatible module format which supports import.meta (after transform) and dynamic import.
It is also powered by tabs.executeScript.

Here is a demo repo for this systemjs runtime: https://github.com/Jack-Works/web-extension-esmodule-test/tree/master/mixed
In this repo, I compile my code into ES Module for background page and ES Module + SystemJS for content script.

In Chrome it will load the whole extension in ES module. In Firefox, it will load background script in ES module and load content script in System JS format.