nuxt: Mismatching childNodes vs. VNodes

Guys, I’m having a problem and need some help to fix that.

I have a simple HTML structure in my component wich has ul’s and li’s, it’s a carousel. I’m using a carousel plugin called OWL Carousel and this plugin modifies a little bit my HTML structure.

I’m calling the plugin’s js file like this:

export default { head: { script: [ { src: '/js/owl2/owl.carousel.min.js' } ] } }

and I’m having this error:

“The client-side rendered virtual DOM tree is not matching server-rendered content.” and a warning “Mismatching childNodes vs. VNodes:”

Print: http://prntscr.com/ghvp5s

It seems like I can’t have a difference betweeen my client side html and what is written on my server side. But most plugins nowdays make modifications on the DOM so it doesn’t make sense to have this error.

<div align="right">_{This question is available on Nuxt.js community (#c1423)}</div>

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 22 (1 by maintainers)

Most upvoted comments

Your lib is available only for client-side! So Nuxt tried to renderer from server-side and failed…

You can create a custom plugin with ssr:false option? => https://nuxtjs.org/guide/plugins#client-side-only

// nuxt.config.js
module.exports = {
  plugins: [
    { src: '~plugins/your-owl-plugin.js', ssr: false }
  ],
}

Another way, from your page.vue, you can use the new element (since Nuxt 1.0.0 RC7) <no-ssr>...</no-ssr> Check this example: https://github.com/nuxt/nuxt.js/blob/dev/examples/no-ssr/pages/index.vue

NicoPennec on Sep 6, 2017

dont use v-if with nuxt-link , use v-show

Imissyou1314 on Jan 26, 2018

I’m getting the same error message using Bootstrap-vue and Nuxt.js: Mismatching childNodes vs. VNodes:

I have a navbar with a ul and li’s. The li’s get populated with a v-for loop and the ul displays conditionally with a v-if directive.

The error message in the console is followed by the li’s that shouldn’t render, since the v-if evaluates to false. Not sure what’s causing this. There’s also a flicker that I describe in this SO thread.

DaniG2k on Nov 5, 2017

Using v-show instead of v-if and v-else solved the issue for me. That being said I do not know why v-if is causing this issue.

ghost on Jun 27, 2018

Issue persists, on first-load it’s ok now but on refresh of page the error pops up again.

yourivandenbrand on Nov 3, 2017

Check, does your server (CloudFlare for example) minify/cache the output on the fly. My problem was there.

TheDeveloperTom on Dec 16, 2017