Failed to execute 'insertBefore' on 'Node': with useAsyncData and Pre-Rendering

[areindl]

Environment

---

• Operating System: Darwin
• Node Version: v20.11.1
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: 2.9.6
• Package Manager: [email protected]
• Builder: -
• User Config: ssr, nitro, runtimeConfig, app, modules, postcss, storyblok, image, plausible, sitemap
• Runtime Modules: @nuxtjs/[email protected], [email protected], @storyblok/[email protected], @vueuse/[email protected], @nuxtjs/[email protected], @nuxt/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected]
• Build Modules: -

---

Reproduction

Link: https://prisma-steuerberatung.netlify.app/blog

I can try to produce a reproduction with Stackblitz if that helps to share the code.

Describe the bug

Hi!

I have created a website that uses SSR and Prerendering. Everything works locally when using dev, but a strange problem appears when I deploy it to Netlify or preview the build locally via serve.

Here is the issue:

1. The website loads blog-posts from an api that I have build in /server.
2. On first load of the page (e.g. via direct link) the content is visible and looks good
3. When I navigate manually to that same page via a nav button, the content is not rendered anymore and the error on the console appears.
4. I fully reload the page: all ok again.

Here is a GIF of the issue:

Link to test it yourself: https://prisma-steuerberatung.netlify.app/blog

What am I doing wrong here?

Any help appreciated 🙏

Additional context

Here is the code of the index.vue to load the blogposts:

<template>
    <div class="py-24 sm:py-32">
        <div class="mx-auto max-w-7xl px-6 lg:px-8">
            <div>
                <PageHeader
                    :blok="{
                        headline: 'Blog',
                        text: 'Im PRISMA Steuerblog finden Sie regelmäßig praxisnahe und aktuelle Steuernews. Hier informieren wir Sie über wichtige Änderungen und Neuigkeiten aus der Steuerwelt.',
                    }" />

                <div
                    class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
                    <NewsArticleCard :post="article" v-for="article in data" :key="article.id" />
                </div>
            </div>


        </div>
    </div>
</template>

<script setup>
const { data, pending, error, refresh } = await useAsyncData('blog', () => $fetch('/api/blog'))

if (error.value) {
    throw createError({
        statusCode: 404,
        statusMessage: 'Blog Posts Not Found',
        fatal: true,
    })
}
</script>

There are also similar issues like #24045 or #13656 where this error occured.

Logs

TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'.
    at insert (Dv3nVqiQ.js:18:178)
    at ft (Dv3nVqiQ.js:14:41813)
    at ft (Dv3nVqiQ.js:14:41556)
    at ft (Dv3nVqiQ.js:14:41400)
    at ft (Dv3nVqiQ.js:14:41400)
    at ft (Dv3nVqiQ.js:14:41400)
    at Object.resolve (Dv3nVqiQ.js:14:7745)
    at pr (Dv3nVqiQ.js:14:42980)
    at He (Dv3nVqiQ.js:14:42086)

[Mini-ghost]

I'm guessing this issue might be related to #13350. Would you like to try the following method? It may help solve the error you encountered.

<script setup>
const asyncData = useAsyncData('blog', () => $fetch('/api/blog'))
const { data } = asyncData

if (import.meta.server) {
  const { error } = await asyncData
  if (error.value) {
    throw createError({
      statusCode: 404,
      statusMessage: 'Blog Posts Not Found',
      fatal: true,
    })
  }
}
</script>

[github-actions]

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritize it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a couple of templates for starting with a minimal reproduction:

👉 https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz
👉 https://codesandbox.io/s/github/nuxt/starter/v3-codesandbox

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[areindl]

Thanks, @Mini-ghost.

Unfortunately, it does not solve the issue.

Now, when I am in npm run dev mode, the error also appears with the following console errors:

In the generated build, it also does not work and the errors are:

Why is there a 404 error in the generated-version? Isn't that supposed to be loaded in the SSR-Process?

[Mini-ghost]

I apologize, but I suspect this issue might be related to other components in your project. The method provided above is merely a workaround and does not truly solve the problem. If you could provide a minimal reproducible example, other developers in the community might be better able to help you clarify the issue.

[areindl]

I am currently traveling. I will provide a reproduction early next week.

Thanks for the help, everyone.

[areindl]

Update:

I created a reproduction of this issue and removed things that are unrelated to the /blog issue. @Mini-ghost seems to be right - the problem stops and everything seems to be okay.

Here is the deployment of the branch: https://66447bc136ba9b78c1cebb85--cute-duckanoo-2e84be.netlify.app/blog

Blog-Content is pre-rendered perfectly. No issue is visible and the content is shown.

I will go on and try to localize which component/module caused the issue.

[areindl]

Update 2:

I spent another couple of hours and was able to locate the issue:

I noticed that for some page navigation it worked (blog content loaded) and for some the error (insertBefore) occurred. The failing pages can one thing in common: I used a layout with a fancy SVG issue.

So I went ahead and removed all svg-backgrounds and surprisingly the error stopped and the page is now loading the prerendered content perfectly: https://prisma-steuerberatung.netlify.app/blog

Here is how I used the layouts in pages-SFCs:

<script lang="ts" setup>
definePageMeta({
    layout: 'with-background',
})

useHead({
    htmlAttrs: {
        class: 'bg-image-2',
    },
})

</script>

File: layout/with-background.vue:

<template>
    <div class="layout-with-background">
        <HeaderComponent />
        <slot />
    </div>
</template>

<script setup>
</script>

<style>
.layout-with-background {
    @apply bg-cover bg-top bg-no-repeat;

    background-image: url('~/assets/background_1.svg?inline'); 
}

</style>

I tried both: with ?inline and without for the svg background-image. No difference.

Interestingly, I also removed almost everything from the layout and the error still came. So it might not even be related to SVG-Backgrounds but some issue with the layout.

<template>
    <div class="layout-with-background">
        <HeaderComponent />
        <slot />
    </div>
</template>

Any clue what might cause the issue?

[areindl]

I found the reason by comparing my layouts and reading the docs again:

Unlike other components, your layouts must have a single root element to allow Nuxt to apply transitions between layout changes - and this root element cannot be a .

Unfortunately, my layouts did not have one root-node. This caused the problem. I am so glad it is working now 🎉

Suggestion: Can Nuxt show a console error if layout does not have a single root element?