Nuxt tree missmatch

[JFGHT]

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

[Hiws]

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]

@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]

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]

@Hiws any confirmation on this?

[ashwinkshenoy]

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!

[jakorn0]

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 .