Usage of experimental_AstroContainer in Client Side Script fails

janus-reith commented 2 days ago

Astro Info

Astro                    v4.11.3
Node                     v22.2.0
System                   macOS (arm64)
Package Manager          pnpm
Output                   server
Adapter                  @astrojs/node

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

No response

Describe the Bug

I am unable to use the Container API clientside within an Astro project it fails with: Uncaught SyntaxError: The requested module '/node_modules/prismjs/prism.js?v=07c8055a' does not provide an export named 'default' (at highlighter.js?v=07c8055a:1:8) In earlier versions I had different errors mentioning something about Vite.

I had tried rendering Astro components with it from within a React component before, so assume it should be possible. What however failed there was passing the React Renderer to the Container, I think it had a similar vite-related error.

What's the expected result?

Be able to use the Container API in the Browser, within an Astro projects.

My use case is live previews of Astro Pages from a CMS. Using React I could simply use client side Interactivity. For Astro Components there was no solution so far (except server-rendering the page with preview data each time). The Container API might solve this.

Link to Minimal Reproducible Example

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

Participation

[ ] I am willing to submit a pull request for this issue.

ematipico commented 1 day ago

The Container isn't meant to be used on the client, doing that will cause importing a great chunk of Astro itself.

janus-reith commented 1 day ago

@ematipico is that an issue on a technical level or because of the resulting bundle size? For that specific preview page which would utilize client rendering the larger bundle size wouldn’t be much of an issue. My only concern would be to make sure certain server functions or secrets don’t leak into the client bundle somehow. But from how I understand it works, the client side Astro instance would be totally separate in the browser, and while there might be server-facing code in Astro files it has bundled, it would only be of those Components that I pass to it so it’s a matter of diligence, both regarding security and browser compatibility.

withastro / astro