solidjs
Broken CSS imports in lazy loaded components in SSR
Describe the bug
The component imported using lazy(() => import("Component")) does not import the CSS file in SSR
Your Example Website or App
https://github.com/33kk/solid-ssr-test
Steps to Reproduce the Bug or Issue
Disable JS. There's an anchor tag for components loaded with import Component from "...", lazy(() => import("Component")) and solid-start's <FileRoutes />, the components imports a CSS file that colors the corresponding anchor tag red.
Expected behavior
The component imported using lazy(() => import("Component")) should load the imported CSS file in SSR but it does it only after hydration.
Screenshots or Videos
No response
Platform
- OS: Linux
- Browser: Firefox
- Version: 106
Additional context
No response
The cause of the issue is that if you disable Javascript, vite's usual CSS HMR behaviour won't work. It depends on javascript. Other styles must be working fine because solid-start does some special stuff to figure out the styles u might need, so preload them in the server-rendered HTML. But we dont do that for lazy components since they might not be on the page yet. So JS actually loads the CSS for them.
Not sure this is a bug, more like mismatched expectations.
The cause of the issue is that if you disable Javascript, vite's usual CSS HMR behaviour won't work. It depends on javascript. Other styles must be working fine because solid-start does some special stuff to figure out the styles u might need, so preload them in the server-rendered HTML. But we dont do that for lazy components since they might not be on the page yet. So JS actually loads the CSS for them.
Not sure this is a bug, more like mismatched expectations.
This basically makes lazy components unusable for me. The component has already been server rendered and it definitely could also include the style, there's nothing preventing that other than actually implementing it. Not sure if this is a vite issue or not, but this is definitely a bug.
Hmm.. I imagine this is tricky because lazy is how we know not to load CSS for the next page. But @33kk is right.. on the same page it could be server rendered before the styles are available. We need to walk through lazy imports here to include CSS. I guess the interesting part is if we can still easily split this up by route. I think so.
Shouldn't it be possible to "simply" intercept the lazy calls and collect them into an array or something while the page is being server rendeted and split them out into the html after?
Looks like this pretty-much prohibits usage of CSS-Modules and lazy-pages at the same time
In setting up for SolidStarts next Beta Phase built on Nitro and Vinxi we are closing all PRs/Issues that will not be merged due to the system changing. If you feel your issue was closed in mistake. Feel free to re-open it after updating/testing against 0.4.x release. Thank you for your patience. See https://github.com/solidjs/solid-start/pull/1139 for more details.