Hi I’m using Nuxt with Apollo in my SSG app and I’m being plagued with the ‘Mismatching childnodes vs vnodes’ console error in my pages. The pages runs fine for the most part, its just a console error and it goes away in live. This error only occurs when I use v-if to check is content exists, lik…

Hello @jacktcunningham_publisher I know this is a silly solution, but it’s always good to try and get those out of the way first, but can you try and refactor your v-if usages into v-show and see if the problem persists? Also, if that doesn’t work, this seems to be related to your problem: Mismatc…

Hi @m.finamor v-show causes the page to error with Cannot read properties of undefined (reading 'property') The reason for using v-if is it avoids running the code entirely rather than v-show which just display nones it with CSS. My guess is you get a split second when ‘property’ is not defined un…

Also re the above thread, I get the same issues if I downgrade to the specified version of Apollo “4.0.1-rc.1”

Further to this i get the same issue with a v-for. I have a standalone page here with no components and with a blank layout which throws the same mismatch bug locally <template> <div> <h1>Consultants</h1> <div v-for="consultant in consultants"> {{consultant.name}}, …

Hello @jacktcunningham_publisher Just checking in once again, but did you manage to solve this issue as well using the Nuxt Vuex Store you mentioned on the other thread?

Hello @jacktcunningham_publisher This is a problem exclusively with the NuxtJS configuration, not with Dato, so i’m going to go on a bit of a limb here, but one thing to note is: Inside your templates and divs, you shouldn’t put content directly in there, without first wrapping them in spans or pa…

Nuxt Mismatching childnodes vs vnodes

🆘 Support

jacktcunningham_publisher January 2, 2022, 2:04pm 7

Hi thanks for checking, no this still seems to be a problem, whether using v-if or v-for. I’ve set up a blank template without the header and footer to isolate the issue,

i can only think it’s something to to with my graphql setup.
I’ve stopped using this check v-if="!$apollo.queries.property.loading as that seems to prevent SSG from working.

I also have the other issue that I’m not sure how best to solve

Topic		Replies	Views
Modular Content - heuristic fragment matching error 🆘 Support	3	693	January 7, 2022
Nuxt 3 graphql integration 🆘 Support	7	2656	August 9, 2022
Nuxt 3, vue-datocms blured image not replaced by the final one 🆘 Support	4	776	May 1, 2023
Heuristic fragment matching going on! 🆘 Support	0	882	October 24, 2019
How to display images from structured text block in Vue/Nuxt.js (edited title) 🆘 Support	6	731	March 8, 2024

Nuxt Mismatching childnodes vs vnodes

Related topics