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 mixed with Svelte and/or Vue cannot be rendered #475

Open
1 task
MrSquaare opened this issue Dec 7, 2024 · 0 comments
Open
1 task

React mixed with Svelte and/or Vue cannot be rendered #475

MrSquaare opened this issue Dec 7, 2024 · 0 comments

Comments

@MrSquaare
Copy link

Astro Info

Astro                    v5.0.3
Node                     v22.11.0
System                   macOS (arm64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             @astrojs/react
                         @astrojs/svelte

Describe the Bug

Trying to render a React component with React integration + Svelte or Vue integration produce the following error:

Unable to render MyReactComponent!

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 MyReactComponent:
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.
  Hint:
    Browser APIs are not available on the server.
    
    If the code is in a framework component, try to access these objects after rendering using lifecycle methods or use a `client:only` directive to make the component exclusively run on the client.
    
    See https://docs.astro.build/en/guides/troubleshooting/#document-or-window-is-not-defined for more information.
    
  Stack trace:
    at renderFrameworkComponent (file:///Users/mrsquaare/Programming/Projects/MrSquaare/adorable-apogee/dist/chunks/astro/server_q5zkn5ym.mjs:1555:15)
    at async renderComponent (file:///Users/mrsquaare/Programming/Projects/MrSquaare/adorable-apogee/dist/chunks/astro/server_q5zkn5ym.mjs:1726:10)

What's the expected result?

To render the React component

Link to Minimal Reproducible Example

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

Participation

  • I am willing to submit a pull request for this issue.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant