fastify-vite
fastify-vite copied to clipboard
Dynamic component import at server doesn't include CSS
Prerequisites
- [X] I have written a descriptive issue title
- [X] I have searched existing issues to ensure the bug has not already been reported
Fastify version
3.25.3
Plugin version
"fastify-vite-vue": "^3.0.0-alpha.12"
Node.js version
14.7
Operating system
macOS
Operating system version (i.e. 20.04, 11.3, 10)
12.1 (21C52)
Description
I use a dynamic lazy load of components as part of the layout, like that:
return import(`../components/layouts/${componentName}.vue`).then(component => {
components[componentName] = component.default;
})
Those components are loaded in both SSR and frontend, but its CSS doesn't include in the SSR resource.
Steps to Reproduce
- load component dynamically using the
import()function. - use this component.
- see that it renders.
- add some CSS inside the component (border / color / background).
- disable javascript in the browser.
- see that it only loads the CSS after hydration when JS is enabled.
Expected Behavior
CSS should be included in the SSR bundle, with hydration.