Skip to content

Usage of experimental_AstroContainer in Client Side Script fails #11350

@janus-reith

Description

@janus-reith

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs triageIssue needs to be triaged

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions