better hydration fail warnings

This commit is contained in:
Evan You 2016-08-04 13:50:16 -04:00
parent fea13b8aed
commit 5ed0c16b68
3 changed files with 12 additions and 2 deletions

View File

@ -346,6 +346,8 @@ export function createPatchFunction (backend) {
}
}
let bailed = false
function hydrate (elm, vnode, insertedVnodeQueue) {
if (process.env.NODE_ENV !== 'production') {
if (!assertNodeMatch(elm, vnode)) {
@ -368,6 +370,11 @@ export function createPatchFunction (backend) {
for (let i = 0; i < children.length; i++) {
const success = hydrate(childNodes[i], children[i], insertedVnodeQueue)
if (!success) {
if (process.env.NODE_ENV !== 'production' && typeof console !== 'undefined' && !bailed) {
bailed = true
console.warn('Parent: ', elm)
console.warn('Mismatching childNodes vs. VNodes: ', childNodes, children)
}
return false
}
}
@ -393,8 +400,9 @@ export function createPatchFunction (backend) {
if (process.env.NODE_ENV !== 'production' && !match) {
warn(
'The client-side rendered virtual DOM tree is not matching ' +
'server-rendered content. Bailing hydration and performing ' +
'full client-side render.'
'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.'
)
}
return match

View File

@ -1,5 +1,6 @@
if (typeof console === 'undefined') {
window.console = {
warn: function () {},
error: function () {}
}
}

View File

@ -5,6 +5,7 @@ import VNode from 'core/vdom/vnode'
describe('hydration', () => {
let vnode0
beforeEach(() => {
spyOn(console, 'warn')
vnode0 = new VNode('p', { attrs: { id: '1' }}, [createTextVNode('hello world')])
patch(null, vnode0)
})