search

dai-shi / waku

⛩️ The minimal React framework
https://waku.gg
MIT License
4.26k stars 112 forks source link

styles are not applied correctly with `stylex` in server components #750

Open emilgpa opened 2 months ago

emilgpa commented 2 months ago

Using stylex with https://github.com/nonzzz/vite-plugin-stylex not apply correctly the styles when the component is a server component. It is applied correctly when the component is a client component. I don't know where the error comes from, if it is from waku or from the plugin. If it is from the plugin then I would open a issue there.

I leave a repo to reproduce it: https://stackblitz.com/edit/vitejs-vite-gj5y4r. The Logotype component should render with blue color but it is black when the server is running first time. If you save a random file like templates/root-layout.tsx then the Logotype component is correctly displays in blue. It happens only in dev mode, when the repository is built and started (waku build, waku start) everything works.

dai-shi commented 2 months ago

We had some issues with vite-plugin-stylex and switched to vite-plugin-stylex-dev by @nonzzz. #361

It would be nice if vite-plugin-sytylex worked too, but I assume it's the upstream issue. (Or, it might be resolved as we upgrade/improve Waku.)

emilgpa commented 2 months ago

@dai-shi The plugin that I use is the same (vite-plugin-stylex-dev). Maybe you were confused by the name in the url? I mention this because it does not have -dev at the end.

dai-shi commented 2 months ago

Maybe you were confused by the name in the url?

Exactly...

Then, I think @nonzzz can help here?

hipstersmoothie commented 2 months ago

I get lots of random errors on startup with stylex too. If you run start on my project twice though it does work. builds are fine. Can share the project if you want

nonzzz commented 2 months ago

Let me check it.

nonzzz commented 2 months ago

@emilgpa Did you add import "@stylex-dev.css"; in your Logotype.tsx ? I add it work well.

nonzzz commented 2 months ago

@hipstersmoothie If you have any problem. Share your project in my plugin repo, i have time to check it.Thanks.

emilgpa commented 2 months ago

@nonzzz Ok, it works. I added it in the root-layout.tsx. I thought it is only needed in that entry file. Anyway, I have the same problem in a project that is larger even though it includes that import. I think I'll need to include this import in all files where stylex is used and maybe that will fix it. I'll try. If it is not solved, I will try to see what it could be and upload a repo again to reproduce it. Thank you.

hipstersmoothie commented 1 month ago

@nonzzz I put that in my _layout and it works a lot better now! No weird react errors anymore. You should really add that to the docs 😄

emilgpa commented 1 month ago

@nonzzz After to apply the import in all files, the most times it render correctly. But sometimes some server components do not have their styles applied correctly. When the browser is loading the files, the vite console shows something like that:

...
14:13:22 [vite] hmr update /@id/@stylex-dev.css (x161)
14:13:22 [vite] page reload @stylex-dev.css
14:13:22 [vite] hmr update /@id/@stylex-dev.css
14:13:22 [vite] page reload @stylex-dev.css
14:13:22 [vite] hmr update /@id/@stylex-dev.css
14:13:22 [vite] hmr update /@id/@stylex-dev.css
14:13:22 [vite] page reload @stylex-dev.css
14:13:22 [vite] hmr update /@id/@stylex-dev.css
...

Many files are being compiled and loaded and meanwhile the browser with vite displays the components. In this part precisely, is when the server components are shown alternating their version with the styles applied or not, to finally show them correctly applied or not. Currently, as I mentioned at the beginning, most of the time they display correctly but a few times it fails, so I reload and they display correctly again. It seems like something like a race condition.

hipstersmoothie commented 1 month ago

I think a lot of that could be fixed with better caching https://github.com/nonzzz/vite-plugin-stylex/issues/28

dai-shi commented 1 month ago

I just noticed running npm run examples:dev:12_css in the waku repo, it shows [vite] page reload @stylex-dev.css every time which is a problem that should be resolved. https://github.com/dai-shi/waku/issues/756#issuecomment-2197109839

hipstersmoothie commented 1 month ago

Yeah that problem is pretty bad and pollutes the log a log. I think what's going on is it creates a virtual module @stylex-dev.css that it invalidates every time it sees a new component using stylex. This can lead to lots of weird issues cause everything is invalidating so quickly.