Errors migrating to server-only components
Hey guys, has anyone experience with migrating existing components to server components?
The first components I tried to migrate were Text/Markdown Components.
When I create a text.client.vue it works on the client. When I got both text.client and text.server it shows usual behaviour as with text.vue.
When I create a text.server.vue only though (which is my goal to save bundle size) I always get:
1. A 400
Bad Request
2. This Serverlog: [Vue warn]: Component NuxtIsland is missing template or render function.
3. I get no additional logs using app:error This is the component: Does anyone have an idea what I'm doing wrong? Or could this be cause by outside factors (modules & plugins)?
3. I get no additional logs using app:error This is the component: Does anyone have an idea what I'm doing wrong? Or could this be cause by outside factors (modules & plugins)?
6 Replies
Unknown User•15mo ago
Message Not Public
Sign In & Join Server To View
Im trying to reporduce right now. Minmal reproduction worked getting a server component to render inside a page, that uses a layout that has a clientside component. (similar to how it is in my project)
Im slowly adding config and modules right now to find the culprit. Ill let you know if I succeed.
https://stackblitz.com/edit/nuxt-starter-nagevb?file=components%2Ftext.vue
I got it.
If you rename text.server.vue to text.vue or text.client.vue it will error out 400 and print [Vue warn]: Component NuxtIsland is missing template or render function.
This might be a renaming issue. It fixes on blitzstack after restarting the dev server. On my local machiene though, I cannot get it to work even after npx nuxi clean'ing the project. One difference I cant seem to reproduce is the stacktrace. My local trace Stackblitz trace I hope this helps. I'm still trying to find a reproduction that shows the exact behaviour of my Issue, since Blitzstack's error resolves and mine doesnt...
This might be a renaming issue. It fixes on blitzstack after restarting the dev server. On my local machiene though, I cannot get it to work even after npx nuxi clean'ing the project. One difference I cant seem to reproduce is the stacktrace. My local trace Stackblitz trace I hope this helps. I'm still trying to find a reproduction that shows the exact behaviour of my Issue, since Blitzstack's error resolves and mine doesnt...
New piece of information.
This is the client-side error I get while navigating to the page that renders the NuxtIsland
![No description](https://cdn.answeroverflow.com/1125369349633495060/image.png)
I first thought its about the serialized prop size, but on blitzstack I can get 4000 paragraphs of lorem rendered by the island.
Since the Text component is rendered inside the non-island content component, it just gets rendered and hydrated as usual. If I change the content component to be a server component too, I get the expected behaviour.
Update. I lowkey give up.
I tried reproducing everything but I cant. In my local project, some components easily convert to servercomponents like SVG Components and some crash. Some because the island head->link payload is missing, sometimes because its too much payload
![No description](https://cdn.answeroverflow.com/1125384683811770488/image.png)
Furthermore some setups seem to work in the blitzstack and some wont. In general Islands might not be easy to migrate to right now when the stack is complex already.
I suspect it being some kind of "because the island gets conditionally rendered by the "normal" ContentPage component in my stack" Issue...
I guess when Nuxt gets CSC and SSC mixed hierachies that might solve. But for now I find it hard to understand:
A. How Islands render and when/how they are fetched.
B. How Islands interact with non island components, slots and conditional rendering.
C. How existing modules and plugins could alter my local stack experience in difference to the stackblitz reproduction