Nuxt•15mo ago

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•15mo ago

Message Not Public

Maik•15mo 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•15mo ago

New piece of information. This is the client-side error I get while navigating to the page that renders the NuxtIsland

Maik•15mo 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•15mo 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

Maik•15mo 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

Gaming

Programming

Errors migrating to server-only components