When calling a function in a template to create a VNode, an error occurs when updating the component: Cannot read properties of null (reading 'emitsOptions')

[cscxj]

Vue version

v3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNp9U8tu2zAQ/JUFL3KQQCrQnlzZaBsEaHtIg7a3sgdHWtlMJJLgwzEg6N+zS9mKggQ+SBB3ZoezD/Xiq7X5PqJYitJXTtkAHkO0a6lVZ40L0MMOBmic6SAjYvZ5hjhsXmETdGtqPMbzgg98B8FSV0b7AJWJOqCDFUssPly8IN+xbQ3FFxewWkMvNRAlRKchSxCJDMxuoq6CMhoqh5uAfAelzPm7RUogbUooi7E6qosOATvbUhadAK5bVT1C2CFEW1MQ7mMIJBwM7BU+JYS9mRYBnTMOlG6M6zZ8fQ7lvSuSDj/lMfdLxaIrKY6FXl5KsR7ll9D3U/3DUBZjSjLGAg5YLn2nLi41vVlpVqcUiVQWs0LElQiefDZqmz94o2miqRvsobOqRffLsmMvBVlghLENdejpZ4oFF/HqFK92WD2+E3/wB45JcefQo9ujFBMWNm6LYYRv/tzigb4nsDN1bIl9BvyN1OPIHkfat6hrsj3jJbc/0oopvf3rbw4BtT8VxUaZOSS+FLRy12dKf7H7Mf+U8mhTqIundX3nl6ixURrvnLF+8S/jwWT/ab/OLFfJzTcadYCl8jRGTqJdKIsJeDPI4RnOHDfq

Steps to reproduce

When you click the update button to update the component status, the console will report an error

What is expected?

Should not report an error

What is actually happening?

Error:
TypeError: Cannot read properties of null (reading 'emitsOptions')
at shouldUpdateComponent (vue.runtime.esm-browser.js:8774:27)
at updateComponent (vue.runtime.esm-browser.js:7336:9)
at processComponent (vue.runtime.esm-browser.js:7283:7)
at patch (vue.runtime.esm-browser.js:6801:11)
at patchBlockChildren (vue.runtime.esm-browser.js:7155:7)
at processFragment (vue.runtime.esm-browser.js:7233:9)
at patch (vue.runtime.esm-browser.js:6775:9)
at ReactiveEffect.componentUpdateFn [as fn] (vue.runtime.esm-browser.js:7496:9)
at ReactiveEffect.run (vue.runtime.esm-browser.js:525:19)
at ReactiveEffect.runIfDirty (vue.runtime.esm-browser.js:563:12)

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 Intel(R) Core(TM) i7-10700 CPU @ 2.90GHz
    Memory: 9.61 GB / 31.84 GB
  Binaries:
    Node: 16.20.2 - C:\nvm4w\nodejs\node.EXE
    Yarn: 1.22.22 - C:\nvm4w\nodejs\yarn.CMD
    npm: 8.19.4 - C:\nvm4w\nodejs\npm.CMD
    pnpm: 8.15.9 - C:\nvm4w\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (131.0.2903.112)

Any additional comments?

I think it may be because the VNode is created at an uncertain time and the blocktree mechanism cannot track it correctly.

Is there a way to solve this error? Or is there an API that can bypass the blocktree mechanism to create a Vnode?

[edison1105]

This is because the vnode has no instance (component).This is an undocumented usage. Maybe you should return a component. see playground

[cscxj]

This is because the vnode has no instance (component).This is an undocumented usage. Maybe you should return a component. see playground

Thanks for your explanation. I know that passing the component to the is property of the component tag is the standard way of writing. I don't know if passing the vnode to the is attribute is the official way of writing. It is not reflected in the documentation, but I don't get any valid error prompts when I do this. And removing the blocktree-related code from the compiled template works fine, because a new vnode instance will be cloned when the vnode is passed in.

[cscxj]

If you are sure that passing VNode to the is property of component is the wrong approach, please help me close this issue.

[cscxj]

It is OK to create in the same block. see: playground
&
Creating a vnode in setup is fine. see: playground

[edison1105]

duplicate of #6913
a workaround

function createNode() {
  setBlockTracking(-1)
  const node = h(Hello)
  setBlockTracking(1)
  return node
}

see playground