Problem using ssr plugin and service worker plugin together
See original GitHub issueHello,
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:
- Created 5 years ago
- Comments:5 (2 by maintainers)
Top 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 >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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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
Note
null
has to be a string here because some validator somewhere is throwing ifdirectoryIndex
isn’t a string.Thank you @Narkoleptika , it works !