Hydration error with scoped slots and component discovery (async components)

[KaragiannidesAgapios]

Versions

• nuxt: ^2.14.12
• node: v14.15.4

Reproduction

Hello everyone and thank you in advance.
I have a strange issue that I don't really understand what's the problem and how to deal with it.
I have installed a fresh nuxt ssr project.
I'm getting the following warning
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

I have three simple components: Form, Input, Button.
Form.vue

<template>
  <form v-bind="$attrs" class="w-full" @submit.prevent="$emit('submitted')">
    <div class="space-y-2 mb-4">
      <slot name="fields" />
    </div>
      <slot name="button" />
    </div>
  </form>
</template>
<script>
export default {
  computed: {
    hasFields() {
      return !!this.$slots.fields
    },
  },
}
</script>

Input.vue

<template>
  <div class="relative w-full">
    <input class="form-input block w-full" />
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
}
</script>

Button.vue

<template>
  <button
    type="submit"
    class="relative btn inline-flex items-center justify-center transition ease-in-out duration-150"
  >
    Save
  </button>
</template>
<script>
export default {}
</script>

I use my components in pages/index.vue like this:

<template>
  <div>
    <Form>
      <template #fields>
        <Input />
        <Input />
      </template>
      <template #button>
        <Button />
      </template>
    </Form>
    <Form>
      <template #fields>
        <Input />
        <Input />
      </template>
      <template #button>
        <Button />
      </template>
    </Form>
  </div>
</template>

<script>
export default {}
</script>

If i use the Form component only once in the view i don't get the warning.
If i use it twice i get it.

Steps to reproduce

Reproduction link

1. Install a fresh nuxt ssr project.
2. Create the components as in the reproduction link

What is Expected?

All the components to render normally without any warnings or errors.

What is actually happening?

I get the following warning.
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

Some extra notes
I know that wrapping the whole thing inside a <client-only> fixes the problem but i want to understand why is this happening in order to avoid it in future cases.
Also if I remove components: true from nuxt.config.js and import the components normally again the warning is gone

<script>
import Input from '~/components/Input'
import Button from '~/components/Button'
import Form from '~/components/Form'

export default {
  components: { Form, Button, Input}
}
</script>

[danielroe]

Check out https://blog.lichter.io/posts/vue-hydration-error/ - hope that helps!

You may have an issue with naming your components the same as native HTML5 element names.

[KaragiannidesAgapios]

@danielroe Thank you for the quick response but I already tried it and it doesn't change anything.

[gpanos]

@danielroe don't know if this helps but i can reproduce the same error with non matching HTML5 element names

https://codesandbox.io/s/elegant-neumann-6h3ju?file=/pages/index.vue

[manniL]

Looks like that is an issue with slots in slotted components. Wondering if that's a vue-ssr-renderer thing

[gpanos]

@manniL not sure if i did it correctly but seems to be working fine the same exact code as my previous link in a plain vue cli app using vue-ssr-renderer. You can see it here https://codesandbox.io/s/ssr-vue-forked-rhoki?file=/src/App.vue
Seems that i can only reproduce it in a Nuxt application with components auto importing enabled.

[manniL]

Indeed. When explicitly importing the components it works as expected BTW: https://k11kl.sse.codesandbox.io/

I changed the title accordingly.

[mschoeffmann]

I'm not sure if it is related to this issue, but as soon as I upgrade from Nuxt 2.14.12 to 2.15.2, I get a lot of [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. which did not appear in 2.14.12.

Node version = 12.20.
Nuxt Target = static.

[gpanos]

@mschoeffmann this specific issue persists in both versions.

[danielroe]

Would you be able to file an issue at https://github.com/nuxt/components/issues by chance? 🙏

[gpanos]

@danielroe nuxt/components#164

[gsjen]

This looks very similar to #6844.

[pi0]

Waiting for upstream: vuejs/vue#11963

[aaronransley]

@pi0 Any chance we could get a new Nuxt release with the vue package bumped to 2.6.13? Looks like vuejs/vue#11963 resolved this issue upstream.

Edit: Apologies, I just realized that 2.6.13 is still pending release on the vue side.

[stale]

Thanks for your contribution to Nuxt!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.