nuxt js "Failed to execute 'appendChild' on 'Node': This node type does not support this method" on mobile view port
Full error message
found this error when trying to run my nuxtjs app with vuetify on mobile viewport, but everything runs well on desktop viewport. error on local machine image : error on local machine : 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. error on server with ubuntu and nginx running my nuxtjs app with pm2 using yarn build then pm2 start yarn -- start image : error on server DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method. both errors occur in the same scenario. when i run it on desktop viewport, then switch to mobile viewport (without reloading the page) it runs well. but if i reload it on mobile viewport, these error occur. not sure which page I should share because this error occur on all pages even on the nuxt+vuetify default homepage. currently the same error also occur on desktop viewport, but it's fixed by wrapping my component inside <client-only></client-only>,and error gone from desktop viewport but still occur on mobile viewport.
Solutionsource: stackoverflow \u2197
Check if you are using v-if directive Try changing it to v-show because v-show renders the HTML and sets display property to true or false, while v-if doesn't render (real conditional rendering). In my case, I had v-if on some nodes in my template and replacing it with v-show kept the element in the DOM and helped missing node errors like this.
API access
Get this solution programmatically \u2014 free, no authentication.
curl https://depscope.dev/api/error/d500aefde01852c349a8d0abf1d99591ea89a0c4d346ff0264f27c5dbea5cc93hash \u00b7 d500aefde01852c349a8d0abf1d99591ea89a0c4d346ff0264f27c5dbea5cc93