Vue Workbox Webpack "cannot use import statement outside a module"

Question

I'm trying to use workbox for the first time but I always get the following error:

Uncaught SyntaxError: Cannot use import statement outside a module

This is my src-sw.js

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST);

I couldn't find anything in the workbox documentation in regards to this problem. How do I handle this?

Its utterly confusing. @mishamosher says that you have to use importscripts, and yet all the examples on the workbox site use imports — Simon H, Sep 04 '20 at 06:47
@SimonH The examples on the workbox site suppose that you're using a transpiler/packer like webpack, Rollup, Parcel, or something else. This is explained [here](https://developers.google.com/web/tools/workbox/guides/get-started#installation). The error described by Binu suggests that no transpiler/bundler is being used, and such scenario is supported as described [here](https://developers.google.com/web/tools/workbox/guides/using-bundlers#using_the_cdn_is_an_alternative_to_bundling) and [here](https://developers.google.com/web/tools/workbox/modules/workbox-sw). — mishamosher, Nov 29 '20 at 15:22
@SimonH Also, if indeed a transpiler/packer is in use, [here](https://developers.google.com/web/tools/workbox/guides/using-bundlers) is more info about how to properly configure it. — mishamosher, Nov 29 '20 at 15:25

score -1 · Answer 1 · answered Jun 25 '20 at 06:17

-1

You can check the Get Started guide to start using Workbox.

Also, you can not use ES modules in ServiceWorkers (yet). Check here for more info: https://stackoverflow.com/a/45578811/1273042

answered Jun 25 '20 at 06:17

mishamosher

1 Answers1