Vue: SSR error during $style injection on cached components

Created on 1 Nov 2018 · 6Comments · Source: vuejs/vue

Version

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.

Source