Skip to content

BDropdown hydration warning in Nuxt production mode #2763

Closed
@sebbayer

Description

@sebbayer

Describe the bug

The BDropdown creates a hydration warning in Nuxt production mode only. I am building the nuxt application with nuxt build and then run it using node .output/server/index.mjs. In order to see the warning below and a Hydration completed but contains mismatches. error, you need to enable debug mode in nuxt config. I made a reproduction link with 0.30.3

Vue warn]: Hydration style mismatch on <ul id=​"BootstrapVueNext__ID__v-0__dropdown___-menu" style=​"position:​ absolute;​ left:​ 0px;​ top:​ 0px;​ display:​ none;​ transform:​ translate(0px, 78px)​;​ will-change:​ transform;​" class=​"dropdown-menu overflow-auto fade" aria-labelledby=​"BootstrapVueNext__ID__v-0__dropdown___" role=​"menu">​…​​

  • rendered on server: style="position:absolute;left:0;top:0;display:none;"
  • expected on client: style="position:absolute;left:0;top:0;display:block;"

Reproduction

https://stackblitz.com/edit/nuxt-starter-dctc7hpw?file=app.vue,nuxt.config.ts

Used Package Manager

npm

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions