Browse Source

better hydration fail warnings

dev
Evan You 8 years ago
parent
commit
5ed0c16b68
  1. 12
      src/core/vdom/patch.js
  2. 1
      test/helpers/to-have-been-warned.js
  3. 1
      test/unit/modules/vdom/patch/hydration.spec.js

12
src/core/vdom/patch.js

@ -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

1
test/helpers/to-have-been-warned.js

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

1
test/unit/modules/vdom/patch/hydration.spec.js

@ -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)
})

Loading…
Cancel
Save