question-mark

Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Problem using ssr plugin and service worker plugin together

See original GitHub issue

Issue Description

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 ?

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

4reactions
Narkoleptikacommented, Sep 16, 2018

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.

1reaction
zickatcommented, Sep 20, 2018

Thank you @Narkoleptika , it works !

Read more comments on GitHub >

github_iconTop Results From Across the Web

service-worker-plugin - npm
Start using service-worker-plugin in your project by running `npm i service-worker-plugin`. There are no other projects in the npm registry ...
Read more >
Ecosystem - Fastify
Fast and low overhead web framework, for Node.js.
Read more >
Server-Side Rendering - Vite
To support conditional transforms, Vite passes an additional ssr property in the options object of the following plugin hooks: resolveId; load; transform.
Read more >
Creating Server-side Rendered Vue.js Apps Using Nuxt.js
Nuxt.js is based off an implementation of SSR for the popular React ... This directory allows you to register Vue plugins before the...
Read more >
Vue CLI Quasar Plugin
Cross-platform support with Vue CLI is handled by a number of community plugins. This means, putting together what Quasar offers out-of-the-box will take ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found