Nuxt.js: Error during $style injection on cached components

[henriqemalheiros]

Reproduction link

https://github.com/henriqemalheiros/nuxt-cached-component-css-modules

Steps to reproduce

• yarn install
• yarn run build
• yarn run start
• Open http://localhost:3000/
• Refresh the page

The error is also reproducible in development mode with yarn run dev.

What is expected ?

The app should render properly.

What is actually happening?

× error TypeError: Cannot set property '$style' of undefined
  at injectStyles (components/CachedComponent.vue:8:0)
  at hook (node_modules/vue-loader/lib/runtime/componentNormalizer.js:53:0)
  at C:\[...]\nuxt-cached-component-css-modules\node_modules\vue-server-renderer\build.js:7467:15
  at C:\[...]\nuxt-cached-component-css-modules\node_modules\vue-server-renderer\build.js:2487:40
  at C:\[...]\nuxt-cached-component-css-modules\node_modules\vue-server-renderer\build.js:7465:11
  at C:\[...]\nuxt-cached-component-css-modules\node_modules\vue-server-renderer\build.js:2487:40
  at renderComponent (C:\[...]\nuxt-cached-component-css-modules\node_modules\vue-server-renderer\build.js:7463:7)
  at RenderContext.renderNode (C:\[...]\nuxt-cached-component-css-modules\node_modules\vue-server-renderer\build.js:7418:5)
  at RenderContext.next (C:\[...]\nuxt-cached-component-css-modules\node_modules\vue-server-renderer\build.js:2436:14)
  at cachedWrite (C:\[...]\nuxt-cached-component-css-modules\node_modules\vue-server-renderer\build.js:2295:9)
  at renderElement (C:\[...]\nuxt-cached-component-css-modules\node_modules\vue-server-renderer\build.js:7656:5)
  at renderNode (C:\[...]\nuxt-cached-component-css-modules\node_modules\vue-server-renderer\build.js:7420:5)
  at renderComponentInner (C:\[...]\nuxt-cached-component-css-modules\node_modules\vue-server-renderer\build.js:7538:3)
  at renderComponent (C:\[...]\nuxt-cached-component-css-modules\node_modules\vue-server-renderer\build.js:7502:5)
  at renderNode (C:\[...]\nuxt-cached-component-css-modules\node_modules\vue-server-renderer\build.js:7418:5)
  at renderComponentInner (C:\[...]\nuxt-cached-component-css-modules\node_modules\vue-server-renderer\build.js:7538:3)

Additional comments?

If you remove the serverCacheKey from the cached component and try again, the app renders properly.

Maybe a bug from vue-loader or vue-server-renderer? I couldn't find the time to create a repro without Nuxt.

_{This bug report is available on Nuxt community (#c7715)}

[prog666]

it reproduces without nuxt

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[danielroe]

This is a live issue for us as well. At the moment CSS modules and component caching are not compatible.

[manniL]

If it reproduces without nuxt as @prog666 said, it's no nuxt issue :|

[danielroe]

@prog666 - I've been unable to reproduce with a plain Vue SSR setup using CSS modules and component caching. Would you help me reproduce it?

[henriqemalheiros]

@manniL @danielroe it is reproducible without Nuxt. I've created a new issue with a repro (vuejs/vue#9010) and I'm closing this one.

[manniL]

@henriqemalheiros Thanks for the effort!