javascriptimportmoduleecmascript-6web-worker

Web Workers - How To Import Modules


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?


Solution

  • ES2015 modules in Workers are available in 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/multipage/workers.html#module-worker-example

    These are the bug-reports for each browser:

    The relevant Can I Use live compatibility data: https://caniuse.com/?search=module%20worker