Is there any good idea for the nuxt project Failed to execute 'appendChild' on' Node',?

nuxt project. After refreshing the page, an error Error while initializing app DOMException: Failed to execute "appendChild" on" Node": This node type does not support this method. is reported. Is there any good solution?

Jul.06,2021

I just came across that in a development environment, logs usually have warning:The client-side rendered virtual DOM tree is not matching server-rendered content.. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside

, or missing < tbody >. Bailing hydration and performing full client-side render.

but it does not affect usage, and this warning is usually reported only when the current page is refreshed. But once build is published online, there will be DOMException: Failed to execute 'appendChild' on' Node': This node type does not support this method problems.

my solution is to directly wrap a < client-only > tag on the code suspected to have a The client-side rendered virtual DOM tree is not matching server-rendered content problem, and directly do not let the background render this part of the code to solve this problem


assign values to objects in created, and put them in mounted


encounter problems + 1
look up a lot, saying that v-if is replaced by v-if, but I try and do not use


I also encounter this problem. I use nuxt+bootstrapvue to deploy to the post-production page refresh to report this error, which is a problem of server rendering. Locate the component that went wrong, and use < no-ssr > < / no-ssr > to include the code that went wrong.


this page has a solution nuxt appendChild error

Menu