Serviceworker and cannot use import statement outside a module

Question

I have an react-example of a service worker, with import statements. Like:

import { clientsClaim } from 'workbox-core';

If I use this code (react) in my service-worker, I get the message:

Uncaught SyntaxError: Cannot use import statement outside a module (at service-worker.js:1:1)

Where is the mistake?

Answer 1

You need to bundle a service worker file that uses ES module imports, as they are not supported in all service worker runtime environments at the moment.

The Workbox documentation has some more examples of this usage. Any bundler that supports ES modules should work; I tend to use esbuild nowadays.