How to import a script in Service Worker when using Webpack

Question

In a Service Worker, I'm trying to import another helper script using importScripts, however I keep getting a Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:5000/src/js/utility.js' failed to load.

I have the following code in the Service Worker:

importScripts('../src/js/utility.js');

workbox.routing.registerRoute(/.*(?:jsonplaceholder\.typicode)\.com.*$/, function(args){
    console.log('Json placeholder being called');
    // Send request to the server.
    return fetch(args.event.request)
        .then(function(res){
            // Clone the response obtained from the server.
            var clonedRes = res.clone();
            // Clear data stored in the posts store.
            clearAllData('posts') // Function from helper file
                .then(function(){
                    return clonedRes.json()
                })
                .then(function(data){
                    for(var key in data){
                        // Write the updated data to the posts store.
                        writeData('posts', data[key]) // Function from helper file
                    }
                });

            return res;
        })
});

workbox.precaching.precacheAndRoute(self.__precacheManifest);

And in utility.js I have the following code:

import { openDB } from 'idb';

export function writeData(st, data){
    console.log(st, data);
}

export function clearAllData(st){
    console.log(st);
}

The functions don't do anything yet, but even these placeholder ones don't work! Eventually I'd like to be able to use the idb npm module, so that's why I'm doing this in a helper, so I can also use it from my normal Javascript file.
Also I'm using Webpack to build my files, and in another project where I don't use it, it works fine, however in this one it just doesn't find the file after building, so I'm thinking Webpack may be screwing something up.

Thanks in advance :)

Answer 1

If you look at the error message very carefully, you see what the problem is :)

Your Service Worker script tries to import "/src/js/utility.js" but it is NOT available. If you open your browser and go to that address, can you see the file? I'm fairly sure you cannot :)

When you build the application with webpack it most likely puts all your files to a directory called "dist". Your Service Worker is ONLY able to import those files. Think about it: when you deploy the application somewhere, only the files in dist/ will be on the server, not the files in src/, right? For this reason the SW script is not able to import the file you want it to import.

Sadly I'm not a webpack expert so I'm not sure how to tell webpack to bundle the file for you and include it in your Service Worker script file :-/