Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hydration error with scoped slots #164

Open
gpanos opened this issue Mar 9, 2021 · 12 comments · Fixed by vuejs/vue#11963
Open

Hydration error with scoped slots #164

gpanos opened this issue Mar 9, 2021 · 12 comments · Fixed by vuejs/vue#11963
Labels
bug Something isn't working upstream

Comments

@gpanos
Copy link

gpanos commented Mar 9, 2021

Hi all,
There are some issues rendering slotted components and using this module with components auto discovery enabled.
Original issue

I think an example will illustrate the problem better:
Having a simple slotted component:
Let's call it Card.vue

<template>
  <div>
    <div>
      <slot name="title"></slot>
    </div>
    <div>
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script>
export default {}
</script>

Having a simple component let's call it Text.vue

<template>
  <div>
    Random text
  </div>
</template>

<script>
export default {}
</script>

Now using these components together throws a hydration error:

    <Card>
        <template #title>
          <Text />
        </template>
        <template #content>
          <Text />
          <Text />
        </template>
    </Card>

    <Card>
        <template #title>
          <Text />
        </template>
        <template #content>
          <Text />
          <Text />
        </template>
    </Card>
[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>.

The really weird part is that using the same markup just once doesn't throw an error.

    <Card>
        <template #title>
          <Text />
        </template>
        <template #content>
          <Text />
          <Text />
        </template>
    </Card>

No error

Original issue
Sandbox to reproduce
Sandbox to prove it's working with simple vue-cli and vue-server-render application
Sandbox to prove it's working in Nuxt without component auto discovery
Related issues

Thanks a lot in advance everyone,
I am trying to dig dipper into this and help as much as I can so let me know if I can provide anything more to help you out.

@joffreyBerrier
Copy link

I have the same issue, and for resolved I import manually the components inside slot. But it's better if I don't have to do this. With the previous version it's work perfectly

@danielroe
Copy link
Member

danielroe commented Mar 16, 2021

@joffreyBerrier For now you should be able to use this as a workaround:

  components: {
    loader: true
  }

(Note: not recommended nor guaranteed to always work.)

A linked issue: nuxt/nuxt#8879

@pi0
Copy link
Member

pi0 commented Mar 16, 2021

The issue is that we components v2, we use async imports in dev mode without loader. This causes nuxt/nuxt#6844 and vuejs/vue#10391. So there is not much do do in nuxt side other than explicitly importing components or force enabling loader: true for development (it makes build slower)

@schneefux
Copy link

schneefux commented Mar 16, 2021

Enabling the loader does not help - it does not fix the reproduction sandbox either 😢

Edit: the sandbox needed a restart - thanks @danielroe

@danielroe
Copy link
Member

@schneefux It fixes the reproduction sandbox for me 🙂

@pi0 pi0 changed the title Hydration error with slotted components and auto component discovery ssr issue with scoped slots and async components / component discovery Mar 16, 2021
@pi0 pi0 added bug Something isn't working upstream labels Mar 16, 2021
@pi0
Copy link
Member

pi0 commented Mar 16, 2021

Waiting for upstream: vuejs/vue#11963

@pi0 pi0 changed the title ssr issue with scoped slots and async components / component discovery Hydration error with scoped slots Mar 16, 2021
@joffreyBerrier
Copy link

But @pi0 however on version 2.14.12 of nuxt which uses nuxt/components V1 it works fine, why it doesn't work anymore I don't understand. So the solution is to import each component in a slot like old way ?

@pi0
Copy link
Member

pi0 commented Mar 16, 2021

@joffreyBerrier This is because with v2, during development instead of using loader to import components, we use global async components. This significantly improves development build but also revealed this bug in vue. In the meantime, you can enable loader in development (#164 (comment)) to use v1 behavior.

@joffreyBerrier
Copy link

I thought that the auto import was "just an automatic import of components" in the components folder but it's more complicated thank's :) So you advise me to import the components that are in slots like the old way and that's it ?

@pi0
Copy link
Member

pi0 commented Mar 16, 2021

So you advise me to import the components that are in slots like the old way and that's it?

For now yes or use loader: true if you have lots of components affected by this condition.

@MrBirb
Copy link

MrBirb commented Jul 23, 2021

@pi0 Upstream was merged btw

@antinomy-studio
Copy link

I'm having the same issue, even with loader: true 🤔

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working upstream
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants