fix(runtime-core): catch TypeError when setting invalid props

packages/runtime-dom/__tests__/patchProps.spec.ts

@@ -1,7 +1,9 @@
 import { patchProp } from '../src/patchProp'
 import { render, h } from '../src'
+import { mockWarn } from '@vue/shared'
 
 describe('runtime-dom: props patching', () => {
+  mockWarn()
   test('basic', () => {
     const el = document.createElement('div')
     patchProp(el, 'id', null, 'foo')
@@ -75,4 +77,19 @@ describe('runtime-dom: props patching', () => {
     expect(root.innerHTML).toBe(`<div>bar</div>`)
     expect(fn).toHaveBeenCalled()
   })
+
+  // #1049
+  test('property TypeError', () => {
+    const el = document.createElement('div')
+    Object.defineProperty(el, 'textContent', {
+      set() {
+        throw new TypeError('Invalid type')
+      }
+    })
+    patchProp(el, 'textContent', null, 'foo')
+
+    expect(
+      `Failed setting prop "textContent" to the DIV`
+    ).toHaveBeenWarnedLast()
+  })
 })

packages/runtime-dom/src/modules/props.ts

@@ -1,3 +1,5 @@
+import { warn } from '@vue/runtime-core'
+
 // __UNSAFE__
 // Reason: potentially setting innerHTML.
 // This can come from explicit usage of v-html or innerHTML as a prop in render
@@ -14,24 +16,30 @@ export function patchDOMProp(
   parentSuspense: any,
   unmountChildren: any
 ) {
-  if (key === 'innerHTML' || key === 'textContent') {
-    if (prevChildren) {
-      unmountChildren(prevChildren, parentComponent, parentSuspense)
+  try {
+    if (key === 'innerHTML' || key === 'textContent') {
+      if (prevChildren) {
+        unmountChildren(prevChildren, parentComponent, parentSuspense)
+      }
+      el[key] = value == null ? '' : value
+      return
+    }
+    if (key === 'value' && el.tagName !== 'PROGRESS') {
+      // store value as _value as well since
+      // non-string values will be stringified.
+      el._value = value
+      el.value = value == null ? '' : value
+      return
+    }
+    if (value === '' && typeof el[key] === 'boolean') {
+      // e.g. <select multiple> compiles to { multiple: '' }
+      el[key] = true
+    } else {
+      el[key] = value == null ? '' : value
+    }
+  } catch (e) {
+    if (__DEV__) {
+      warn(`Failed setting prop "${key}" to the ${el.tagName}`)
     }
-    el[key] = value == null ? '' : value
-    return
-  }
-  if (key === 'value' && el.tagName !== 'PROGRESS') {
-    // store value as _value as well since
-    // non-string values will be stringified.
-    el._value = value
-    el.value = value == null ? '' : value
-    return
-  }
-  if (value === '' && typeof el[key] === 'boolean') {
-    // e.g. <select multiple> compiles to { multiple: '' }
-    el[key] = true
-  } else {
-    el[key] = value == null ? '' : value
   }
 }