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

React components cannot be rendered when using both React and Svelte #12766

Open
1 task
aminevg opened this issue Dec 17, 2024 · 2 comments
Open
1 task

React components cannot be rendered when using both React and Svelte #12766

aminevg opened this issue Dec 17, 2024 · 2 comments
Labels
needs triage Issue needs to be triaged

Comments

@aminevg
Copy link
Contributor

aminevg commented Dec 17, 2024

Astro Info

Astro                    v5.0.9
Node                     v18.20.3
System                   Linux (x64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             @astrojs/react
                         @astrojs/svelte

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

No response

Describe the Bug

In an Astro project with both React and Svelte integrations installed, the following error appears when trying to render React components:

Unable to render ReactButton!

This component likely uses @astrojs/react, @astrojs/preact, @astrojs/solid-js, @astrojs/vue or @astrojs/svelte,
but Astro encountered an error during server-side rendering.

Please ensure that ReactButton:
1. Does not unconditionally access browser-specific globals like window or document.
   If this is unavoidable, use the client:only hydration directive.
2. Does not conditionally return null or undefined when rendered on the server.

If you're still stuck, please open an issue on GitHub or join us at https://astro.build/chat.

The error appears even if no Svelte component is on the same page.
The error appears regardless of the client directive used (or when no client directive is used), except when using client:only (in which case the React component is rendered as expected).

What's the expected result?

The React component should be rendered as expected.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-lritq8hm

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 Dec 17, 2024
@ya-lops
Copy link

ya-lops commented Dec 17, 2024

<ReactButton client:only='react' />

@aminevg
Copy link
Contributor Author

aminevg commented Dec 18, 2024

@ya-lops Yes, that works! But using client:load results in an error, and that happens only when the Svelte integration is available

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

2 participants