javascript - Web Workers - How To Import Modules

Question

I am using ES2015 Import / Export modules.

In my worker file, when I try to import functions like I normally do:

worker.js

import { a, b, c } from "./abc.js";

I get the error: SyntaxError: import declarations may only appear at top level of a module

As I am exporting functions in my module 'abc.js', I am not sure how to use them using the old (& apparently on its way out) syntax:

self.importScripts( "/app/abc.js" );

So, my question is, how do we use the new import module syntax with workers?

Second question is, what does importScripts import into when it imports from a module in where is there is no global object parent being exported?

Answer 1

ES2015 modules in Workers are available in Desktop Safari and in Chromium browsers.

If other browsers / versions are your target, you still need to use importScripts().

When available, you create a module-worker like this:

new Worker("worker.js", { type: "module" });

See: https://html.spec.whatwg.org/#module-worker-example

These are the bug-reports for each browser:

• Firefox: In development ?? please vote!
• Chromium Browsers:
  Dedicated Workers: Available since version 80 ??
  Shared Workers: Available since version 83 ??
  Service Workers: Available since version 91 ??
• Webkit:
  Safari Desktop: Available since Safari 14.1 ??
  Safari Mobile (iOS): Available since Safari 15 ??