SSR error during $style injection on cached components
See original GitHub issueVersion
2.5.17
Reproduction link
https://github.com/henriqemalheiros/vue-ssr-cached-component-css-modules
Steps to reproduce
yarn install
yarn run ssr:build
yarn run ssr:start
- Open
http://localhost:8000/
- Refresh the page
The error is also reproducible in development mode with yarn run ssr:serve
.
What is expected?
The app should render properly, as it rendered before refreshing the page.
What is actually happening?
error during render : /
TypeError: Cannot set property '$style' of undefined
at CachedComponent_injectStyles (src/components/CachedComponent.vue:8:0)
at hook (node_modules/vue-loader/lib/runtime/componentNormalizer.js:53:0)
at c:\[...]\vue-ssr-cached-component-css-modules\node_modules\vue-server-renderer\build.js:7467:15
at c:\[...]\vue-ssr-cached-component-css-modules\node_modules\vue-server-renderer\build.js:2487:40
at c:\[...]\vue-ssr-cached-component-css-modules\node_modules\vue-server-renderer\build.js:7465:11
at c:\[...]\vue-ssr-cached-component-css-modules\node_modules\vue-server-renderer\build.js:2487:40
at renderComponent (c:\[...]\vue-ssr-cached-component-css-modules\node_modules\vue-server-renderer\build.js:7463:7)
at RenderContext.renderNode (c:\[...]\vue-ssr-cached-component-css-modules\node_modules\vue-server-renderer\build.js:7418:5)
at RenderContext.next (c:\[...]\vue-ssr-cached-component-css-modules\node_modules\vue-server-renderer\build.js:2436:14)
at cachedWrite (c:\[...]\vue-ssr-cached-component-css-modules\node_modules\vue-server-renderer\build.js:2295:9)
If you remove the serverCacheKey
from the cached component and try again, the app renders properly.
Originally I thought this was a Nuxt related issue (nuxt/nuxt.js#3868). I then forgot about the issue, since I ditched component caching, but now I was able to find the time to reproduce it with plain Vue.
Issue Analytics
- State:
- Created 5 years ago
- Reactions:11
- Comments:10 (1 by maintainers)
Top Results From Across the Web
Server side rendering Styled-Components with NextJS - Medium
Styled-components supports concurrent SSR (server side rendering) with stylesheet rehydration. The basic idea is that when your app renders ...
Read more >Server-Side Rendering (SSR) - Vue.js
Reactivity on the Server During SSR, each request URL maps to a desired state of our application. There is no user interaction and...
Read more >Why insert style again on client-side when using ssr? (from ...
why should we inject CSS again on client-side if it's already injected server-side? Is there any difference between client-side cache and server ...
Read more >vue-server-renderer - npm
When to use component caching ... If the renderer hits a cache for a component during render, it will directly reuse the cached...
Read more >3 Known Issues and Workarounds - Oracle Help Center
Error When Configuring Security Role For Newly Created Coherence Cluster Service or Cache. Issue. Impacted Platforms: All. An unexpected error condition is ...
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 have same issue 😦
any news?