81

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?

5 Answers 5

100

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:

  • Firefox:
    Workers: Available since version 114 ✔️
    Service Workers: in development 🏴
  • 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 ✔️

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

8
  • 3
    How to know when it will be supported?
    – Yairopro
    Commented Dec 26, 2017 at 16:20
  • 1
    See my updated Answer. Chromium is actively developing it. Commented Dec 27, 2017 at 22:28
  • Ah, so only the new Worker(..) needs to specify "module". The actual worker code can have import/export as normal. Is this right? Sounds like node's .mjs :)
    – backspaces
    Commented Jul 24, 2018 at 16:35
  • It’ll be shipped with Chromium 80 and Chrome 80 is planned to be stable on February 4, 2020. Alright……. Commented Dec 19, 2019 at 9:13
  • 1
    Note: If you have a dependency that forcibly uses importScripts, then you can replace self.importScripts with a function that does a synchronous XHR and self.eval() as a polyfill. Commented Jan 30 at 22:35
11

2020:

Chrome 80 has shipped module workers in February 2020 (and Chrome 82 will ship modules for shared workers). Firefox/Safari do not support those features for now: tests

You may want to use import-from-worker lib to do the heavy lifting for you (for now, you need to check the support for modules in workers and do the fallback by yourself).

1
4

As of Nov 21 importing modules in workers still seems to be flaky. One solution is to use rollup to generate an IIFE from your worker as follows:

//worker.js
import { MyModule } from 'my-module.js'
onconnect = async (e) => {
    var port = e.ports[0];
    MyModule.func()

    port.onmessage = (e) => {
        port.postMessage("Hi App");
    }
}

//rollup config
export default [
{
        'input': 'worker.js',
        'output': {
            'file': 'dist/worker.js',
            'format': 'iife'
        },
 },
]


//dist/worker.js (rollup output)

(function () {
    'use strict';
    //MyModule code here, generated by rollup
    
    MyModule.func()
    onconnect = async (e) => {
        var port = e.ports[0];
        port.onmessage = (e) => {
            port.postMessage("Hi App");
        };
    };

}());

//main app

const worker = new SharedWorker("/dist/worker.js");
worker.port.onmessage = (e) => {
    console.log('Message received from worker: ' + e.data);
}
worker.port.postMessage("Hi worker");

Essentially rolllup is doing the work that browsers should be doing. This is working well for me. Of course the code size is increased because the module code is getting copied into worker as well. But it is still DRY as the code is being generated by rollup.

3

ES Modules in workers are already available in Chrome, enabling Experimental Web Platform Features, using the proper flag when launching chrome:

chrome.exe --enable-experimental-web-platform-features

This is the syntax you need to use to load the worker script as a module :

new Worker( 'my-worker.js', { type : 'module' } );

This feature has been in development for almost ayear, and should be available soon, without the need of special flags, however, there is no official release date yet.

1
  • Also instead starting with a flag there option for that in chrome://flags/ then search for Experimental Web Platform features or something like that Commented Apr 12, 2021 at 2:04
-3

for me assigning to self. worked well. I've put import to another js file: abcImported.js

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

export {  a, b, c };

and in the service worker:

self.a = require('abcImported.js').a;
self.b = require('abcImported.js').b;

in this way, it is accessible inside the worker. (tested in chrome)

4
  • 1
    Where are you getting require from? Commented Mar 3, 2019 at 14:13
  • I think this is another (insane!) case where workflow has modified "require" into a solution that works. Rollup? or more likely Webpack?
    – backspaces
    Commented Mar 16, 2019 at 17:22
  • Yep, webpack. In my case it was rails applications which uses webpacker gem which uses webpack :) Commented Mar 21, 2019 at 3:39
  • Is abcImported.js a file hosted separately? Commented Apr 15, 2020 at 10:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.