bootstrap-vue: [1.0.0] SSR mismatch with b-popover and b-modal

VueJS version: 2.5.3 Bootstrap-vue version: 1.0.0

<b-popover /> and <b-modal /> are causing mismatch errors when rendered server side. They both appear to be inserting an extra text node with empty content.

Here’s an example of an error generated when including the following in a template that is rendered server side: <b-popover><p>Hello World</p></b-popover> Screenshot of error generated above

And then here is an example that is caused by the following server rendered content: <b-modal visible><p>Hello World</p></b-modal> Screenshot of modal err

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 33 (19 by maintainers)

Most upvoted comments

Thanks for the reports. It should be fixed in v1.0.1 now 😃

pi0 on Nov 7, 2017

@JamieLottering Try changing your plugins/bootstrap.js file to the following (to use the fully compiled esm file):

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm'

Vue.use(BootstrapVue)

I think there will need to be a few tweaks to the new es builds, or vue-loader config requirements to compile the .vue files properly

tmorehouse on Nov 7, 2017