Static GitHub Issues

[2139] Mismatching childNodes vs. VNodes - Only in Firefox

prev: Nuxt stop server
next: nens

I'm developing a site using Nuxt v. 1.0.0-rc9.

In a particular list of elements, Firefox (v57) is complaining about a mismatch between childNodes and VNodes, whereas Chromium (v62) isn't.

I am not manipulating the DOM at client side in any way, and the HTML is valid.

The page where the problem occurs is the following: http://dondeverlo.com:8080/?ver=todo

In production mode there is no error message in the console, however, when loading the given URL in Firefox, a lot of elements of the list disappear when hydration is bailed and a client side render is performed. I'd be glad to activate Vue Dev Tools in the production build if this helped finding the problem, but I haven't found how.

When running in dev mode, the Firefox console shows this error:

Mismatching childNodes vs. VNodes:  
NodeList [ div.Provider, div.Provider ]
 
[…]
0: Object { tag: "vue-component-20-provider", data: {…}, key: "9666-19", … }
1: Object { tag: "vue-component-20-provider", data: {…}, key: "9666-52", … }
2: Object { tag: "vue-component-20-provider", data: {…}, key: "9666-53", … }
3: Object { tag: "vue-component-20-provider", data: {…}, key: "9666-105", … }

These 9666-X keys are part of an item in the list which disappears after the client side render in Firefox, but stays in the list when viewed in Chromium (this 9666 item can be found by searching for the text "Apoel - Madrid" in the page).

Does anyone have an idea of what may be happening?

Thanks in advance for your help, and thank you for this great great Framework :)

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1895">#c1895</a>)</em></sub></div>