nuxt项目Failed to execute 'appendChild' on 'Node'，有没有什么好办法？

Question

nuxt项目，刷新页面之后报错Error while initializing app DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.有没有什么好的解决办法？

Answer 1

我刚碰到，一般在开发环境下，日志会有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 <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

但是不影响使用，而且一般都是在刷新当前页面的时候才会报这个警告。但是一旦build发布到线上就会发生DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method的问题。

我的解决方案是，直接在疑似产生The client-side rendered virtual DOM tree is not matching server-rendered content问题的代码上包裹一层<client-only>标签，直接不让后台渲染这部分代码就解决这个问题了

Answer 2

在created里给对象赋值了， 放到mounted里就可以了

Answer 3

这个页面有解决方案 nuxt appendChild error

Answer 4

在console大概率能看到是哪里报的错误，在楼上warning前面些位置，然后找到该文件，用<no-SSR>包裹起来就好，低版本可能需要使用<client-only>。我这边的话，主要是<nuxt-link>包裹了自定义组件导致的

Answer 5

遇到问题+1
查了很多，说v-if替换成v-show,但是我尝试了并没有用

Answer 6

我也遇到这个问题，我用的nuxt+bootstrapvue部署到生产后页面刷新就报这个错，是服务端渲染的问题。定位到出错的是哪个组件，使用<no-ssr></no-ssr>将出错的代码包含起来就行了。