search

withastro / astro

The web framework for content-driven websites. ⭐️ Star to support our work!
https://astro.build
Other
45.09k stars 2.36k forks source link

Astro + Solid + Kobalte strange behaviour in .astro pages #9412

Closed giovacalle closed 7 months ago

giovacalle commented 8 months ago

Astro Info

Astro                    v4.0.3
Node                     v18.18.0
System                   Linux (x64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             @astrojs/solid-js

If this issue only occurs in one browser, which browser is a problem?

Arc, Firefox

Describe the Bug

First of all a thank you for awesome frameworks! 🚀

Returning to the problem, I noticed that when kobalte is used in .astro pages, using composition, the islands are not rendered in the DOM. On the other hand, if the same de-composed component is wrapped by a single component then it is correctly rendered.

I also tried following the note for SSR by kobalte to add the package in the 'ssr.noExternal' of vite config but it does not work.

What's the expected result?

I expect islands are rendered correctly without having to re-export through a wrapper component

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-9xb3p3-rvdeyn?file=src%2Fpages%2Findex.astro

Participation

bluwy commented 8 months ago

I think this is an expected limitation from Astro at the moment. When you specify the components in an Astro file, Astro can only render the components individually, so the React context its using cannot work as there's no connection between the rendered components.

I feel like we could perhaps support this still. The react integration has the experimentalReactChildren option. I'll leave this open for now, but if others feel like this isn't possible or should be a roadmap discussion, I'm also fine with closing this for now.

giovacalle commented 8 months ago

Okay, it makes sense to me. Indeed, other components composed without context render as expected. I agree with closing the issue; it's good to hear that it might become a feature

florian-lefebvre commented 7 months ago

https://github.com/withastro/roadmap/discussions/742 is about this issue specifically for React. I think your issue shows we need this to work for all ui frameworks. Feel free to upvote, comment with your use-case and close this issue!