Problem using ssr plugin and service worker plugin together

Hello,

First, really nice job with your plugin.

I just found a small issue when I use it it with service worker plugin. It works when I first load the page, but a the second time (when the page come from the cache) I have a blank page with this issue in the console :

Uncaught (in promise) DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at Object.Zr [as appendChild] (http://localhost:8000/js/chunk-vendors.915e47f8.js:7:39158)
    at g (http://localhost:8000/js/chunk-vendors.915e47f8.js:7:41765)
    at h (http://localhost:8000/js/chunk-vendors.915e47f8.js:7:41015)
    at _ (http://localhost:8000/js/chunk-vendors.915e47f8.js:7:41851)
    at P (http://localhost:8000/js/chunk-vendors.915e47f8.js:7:45087)
    at a.__patch__ (http://localhost:8000/js/chunk-vendors.915e47f8.js:7:45447)
    at a.Ue.t._update (http://localhost:8000/js/chunk-vendors.915e47f8.js:7:17525)
    at a.r (http://localhost:8000/js/chunk-vendors.915e47f8.js:7:18420)
    at sn.get (http://localhost:8000/js/chunk-vendors.915e47f8.js:7:20934)
    at new sn (http://localhost:8000/js/chunk-vendors.915e47f8.js:7:20852)

I’m using a fresh vue-cli app for the test, building it in production mode, just adding dynamic import on all routes (it was my main issue in ssr with vue). It work find without service worker plugin.

Do you think I did a mistake adding plugin, or is it a global issue ?

[Narkoleptika]

I can confirm this issue.

It’s the result of workbox (used by the pwa plugin) trying to cache /index.html so that it can be used when a route doesn’t match a cached route and ends with a / (More info)

That’s great, except that the index.html isn’t valid yet, since it’s intended to be used while rendering the app, so it has placeholders like {{{ renderResourceHints() }}} and {{{ renderStyles() }}} which totally bomb when used directly on the client from the service worker cache. This is more apparent when you enable the service worker in development.

A workaround is to add this to your vue.config.js

module.exports = {
    pwa: {
        workboxOptions: {
            directoryIndex: 'null'
        }
    }
}

Note null has to be a string here because some validator somewhere is throwing if directoryIndex isn’t a string.

[zickat]

Thank you @Narkoleptika , it works !