Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Usage of experimental_AstroContainer in Client Side Script fails #11350

Closed
1 task
janus-reith opened this issue Jun 26, 2024 · 3 comments
Closed
1 task

Usage of experimental_AstroContainer in Client Side Script fails #11350

janus-reith opened this issue Jun 26, 2024 · 3 comments
Labels
needs triage Issue needs to be triaged

Comments

@janus-reith
Copy link

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.
@github-actions github-actions bot added the needs triage Issue needs to be triaged label Jun 26, 2024
@ematipico
Copy link
Member

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

@janus-reith
Copy link
Author

@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.

@Princesseuh
Copy link
Member

It's a technical limitation, Astro depends on many many things that don't run in the browser. It's not impossible that one day, perhaps, in a long future... but for now it'd be quite tough.

I'll close this issue in favour of the discussion around the RFC, feel free to bring up this need there: withastro/roadmap#916

@Princesseuh Princesseuh closed this as not planned Won't fix, can't repro, duplicate, stale Jul 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs triage Issue needs to be triaged
Projects
None yet
Development

No branches or pull requests

3 participants