Description
Version
2.5.16
Reproduction link
https://github.com/shawnheide/vue-hackernews-2.0
Steps to reproduce
I forked vue-hackernews-2.0 and added two <noscript>
elements in App.vue. One <noscript>
just has text inside it and the other has a nested <img>
. If you 'npm install' and 'npm run dev' with javascript enabled, you will see an error occurs in the browser console during hydration for the <noscript>
element with the nested <img>
. The <noscript>
with text doesn't throw an error.
What is expected?
The hydration process makes an exception for children of <noscript>
elements, assuming nothing can be done about the server-side rendering of children of <noscript>
tags (since it appears to be a common browser issue).
What is actually happening?
The hydration bails early because the server-side <noscript>
renders its children as a string and the client-side renders the children as an HTML element.
The error occurs in the assertNodeMatch
function in vue.runtime since node.tagName
is undefined due to the fact that it is a string.
Also, there is no issue when you disable javascript. The text and the image render just fine. Any thoughts or ideas on this are much appreciated. Thanks for your time.