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

NextJS - Icons as slots don't appear to SSR #126

Open
jamieomaguire opened this issue May 3, 2024 · 1 comment
Open

NextJS - Icons as slots don't appear to SSR #126

jamieomaguire opened this issue May 3, 2024 · 1 comment

Comments

@jamieomaguire
Copy link
Contributor

jamieomaguire commented May 3, 2024

It seems as though our Icon web components do not properly render when SSR is used in the NextJS app. From some basic testing, I can only see this issue occurring when icons are used as slots. When they are used on their own, or inside another component, they seem to render fine.

To reproduce:

  1. Go to the Icon Button page for the NextJS app.
  2. In the browser tools (I recommend Chrome), disable Javascript
  3. Reload the page
  4. The Icon button will render, but there is no icon inside it

Expected behaviour:

  1. Go to the Icon Button page for the Nuxt app.
  2. In the browser tools (I recommend Chrome), disable Javascript
  3. Reload the page
  4. The Icon button will render and show the icon inside it

In contrast, the icons page for NextJS seems absolutely fine using the approach above to test.

I have tried using other web components as slots and they seemed fine. I also reproduced this by adding both pie-divider and icon-search to the pie-card component on the card page and only the icon did not render.

@jamieomaguire
Copy link
Contributor Author

Further info - it seems like when I run a proof of concept using NextJS 14 and the App Router structure, the issue does not exist.

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