N
Nuxt•2y ago
Maik

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 
at createError (./node_modules/h3/dist/index.mjs:128:15)
at Object.handler (./.nuxt/dev/index.mjs:1710:15)
at Object.handler (./node_modules/h3/dist/index.mjs:1247:31)
at runMicrotasks ()
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async toNodeHandle (./node_modules/h3/dist/index.mjs:1322:7)
at async Object.ufetch [as localFetch] (./node_modules/unenv/runtime/fetch/index.mjs:9:17)
at async Object.errorhandler [as onError] (./.nuxt/dev/index.mjs:1333:30)
at async Server.toNodeHandle (./node_modules/h3/dist/index.mjs:1329:9)
at createError (./node_modules/h3/dist/index.mjs:128:15)
at Object.handler (./.nuxt/dev/index.mjs:1710:15)
at Object.handler (./node_modules/h3/dist/index.mjs:1247:31)
at runMicrotasks ()
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async toNodeHandle (./node_modules/h3/dist/index.mjs:1322:7)
at async Object.ufetch [as localFetch] (./node_modules/unenv/runtime/fetch/index.mjs:9:17)
at async Object.errorhandler [as onError] (./.nuxt/dev/index.mjs:1333:30)
at async Server.toNodeHandle (./node_modules/h3/dist/index.mjs:1329:9)
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: 
<script setup lang="ts">
const props = defineProps<{ imprint: ImprintModel }>();
const text = props.imprint.translations?.[0]?.imprint_text;
</script>

<template>
    <div
        class="content pt-[10rem] p-10 dark:text-white"
        v-html="text" />
</template>
<script setup lang="ts">
const props = defineProps<{ imprint: ImprintModel }>();
const text = props.imprint.translations?.[0]?.imprint_text;
</script>

<template>
    <div
        class="content pt-[10rem] p-10 dark:text-white"
        v-html="text" />
</template>
Does anyone have an idea what I'm doing wrong? Or could this be cause by outside factors (modules & plugins)?
6 Replies
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Maik
MaikOP•2y ago
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 
at createError (./node_modules/h3/dist/index.mjs:128:15)
at Object.handler (./.nuxt/dev/index.mjs:1710:15)
at Object.handler (./node_modules/h3/dist/index.mjs:1247:31)
at runMicrotasks ()
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async toNodeHandle (./node_modules/h3/dist/index.mjs:1322:7)
at async Object.ufetch [as localFetch] (./node_modules/unenv/runtime/fetch/index.mjs:9:17)
at async Object.errorhandler [as onError] (./.nuxt/dev/index.mjs:1333:30)
at async Server.toNodeHandle (./node_modules/h3/dist/index.mjs:1329:9)
at createError (./node_modules/h3/dist/index.mjs:128:15)
at Object.handler (./.nuxt/dev/index.mjs:1710:15)
at Object.handler (./node_modules/h3/dist/index.mjs:1247:31)
at runMicrotasks ()
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async toNodeHandle (./node_modules/h3/dist/index.mjs:1322:7)
at async Object.ufetch [as localFetch] (./node_modules/unenv/runtime/fetch/index.mjs:9:17)
at async Object.errorhandler [as onError] (./.nuxt/dev/index.mjs:1333:30)
at async Server.toNodeHandle (./node_modules/h3/dist/index.mjs:1329:9)
Stackblitz trace 
at Module.createError (./node_modules/h3/dist/index.mjs:229:15)
at Object.eval [as handler] (./.nuxt/dev/index.mjs:1225:88)
at Object.eval [as handler] (./node_modules/h3/dist/index.mjs:1386:31)
at async toNodeHandle (./node_modules/h3/dist/index.mjs:1461:7)
at async Object.ufetch [as localFetch] (./node_modules/unenv/runtime/fetch/index.mjs:28:17)
at async Object.errorhandler [as onError] (./.nuxt/dev/index.mjs:850:30)
at async Server.toNodeHandle (./node_modules/h3/dist/index.mjs:1468:9)
at Module.createError (./node_modules/h3/dist/index.mjs:229:15)
at Object.eval [as handler] (./.nuxt/dev/index.mjs:1225:88)
at Object.eval [as handler] (./node_modules/h3/dist/index.mjs:1386:31)
at async toNodeHandle (./node_modules/h3/dist/index.mjs:1461:7)
at async Object.ufetch [as localFetch] (./node_modules/unenv/runtime/fetch/index.mjs:28:17)
at async Object.errorhandler [as onError] (./.nuxt/dev/index.mjs:850:30)
at async Server.toNodeHandle (./node_modules/h3/dist/index.mjs:1468:9)
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...
Maik
MaikOP•2y ago
New piece of information. This is the client-side error I get while navigating to the page that renders the NuxtIsland
No description
Maik
MaikOP•2y ago
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.
Maik
MaikOP•2y ago
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
Maik
MaikOP•2y ago
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
Want results from more Discord servers?
Add your server