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

Nuxt tree missmatch #5453

Closed
JFGHT opened this issue May 29, 2020 · 6 comments · Fixed by #5723
Closed

Nuxt tree missmatch #5453

JFGHT opened this issue May 29, 2020 · 6 comments · Fixed by #5723

Comments

@JFGHT
Copy link

JFGHT commented May 29, 2020

Describe the bug

Happening since 2.15.0.

<b-card no-body class="text-center">
  <div class="bg-secondary text-light">
      This is some content without the default <samp>&lt;b-card-body&gt;</samp> section. Notice the
      lack of padding between the card's border and this gray <samp>&lt;div&gt;</samp>.
  </div>
</b-card>

Vue throws:

[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

, or missing . Bailing hydration and performing full client-side render.

Expected behavior

You can also see that the SSR content is empty but then hydrates later.

Versions

Libraries:

  • BootstrapVue: 2.15.0
  • Bootstrap: 4.5.0
  • Vue: 2.6.11
  • Nuxt: 2.12.2

Environment:

  • OS: Ubuntu
  • Browser: Chrome
  • Version: 83.0.4103.61

Demo link

https://codesandbox.io/s/admiring-fast-tdx6c?file=/pages/index.vue

@JFGHT JFGHT changed the title card no-body with Nuxt tree missmatch Nuxt tree missmatch May 29, 2020
@Hiws
Copy link
Member

Hiws commented May 29, 2020

I don't think the issue is the card that you posted, but the <b-dropdown> in your codesandbox.

If i comment out the <b-dropdown>, the error goes away.
Specifically it seems it's the text prop on <b-dropdown>.
Removing the prop removes the error, and adding it back makes the error appear again.

@JFGHT
Copy link
Author

JFGHT commented May 29, 2020

@Hiws I had to try something else in codesandbox because I could not reproduce the error I was having locally with the card only (no-body prop causes it). I was able to trigger the bug with <b-dropdown>, so this probably leads to a major issue.

@nachogarcia
Copy link

nachogarcia commented Jun 2, 2020

I have had this issue as well with dropdowns in 2.15 but haven't been able to reproduce it in a sandbox outside my project. Mentioned it in #4834 (comment)

@JFGHT
Copy link
Author

JFGHT commented Jun 27, 2020

@Hiws any confirmation on this?

@ashwinkshenoy
Copy link

ashwinkshenoy commented Aug 5, 2020

I kinda fixed this issue:

My code Before fix:

<b-dropdown id="dropdown-1" class="header-menu__dropdown" text="Features">
    <b-dropdown-item to="/social-media-campaigns">Social Media</b-dropdown-item>
</b-dropdown>

My code After fix:

<b-dropdown id="dropdown-1" class="header-menu__dropdown">
    <template v-slot:button-content>
        Features
    </template>
   <b-dropdown-item to="/social-media-campaigns">Social Media</b-dropdown-item>
</b-dropdown>

Not sure why the text prop on b-dropdown, is creating the issue.
Hope this helps as a workaround till the fix!

@jakubornass
Copy link

jakubornass commented Aug 20, 2020

I can confirm the same issue happening for me since bootstrap-vue@2.15.0. And I can also confirm the above fix works, thanks @ashwinkshenoy .

@jacobmllr95 jacobmllr95 added this to To do in v2.17.0 via automation Sep 3, 2020
v2.17.0 automation moved this from To do to Done Sep 4, 2020
jacobmllr95 added a commit that referenced this issue Sep 4, 2020
…ren` (closes #5453, #5557) (#5723)

* fix(ssr): avoid tree mismetaches by either using `domProps` or `children`

* Update README.md
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
v2.17.0
  
Done
6 participants