🌐 AI搜索 & 代理 主页
Skip to content

Nuxt tree missmatch #5453

@JFGHT

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions