cannot render custom component by literal.

[dewfall123]

Version

3.0.0-alpha.8

Reproduction link

Steps to reproduce

• vue2 example
  https://codepen.io/dewfall/pen/eYNVXEb

• vue3

import { createApp, defineComponent, h } from 'vue'

const customComponent = defineComponent({
  props: {
    text: String,
  },
  setup(props) {
    return () => <p>{props.text}</p>
  },
})

createApp({
  components: {
    customComponent,
  },
  setup() {
    return () => h('customComponent', { text: 'this is a component!' })
    // return () => h(customComponent, { text: 'this is a component!' })
  },
}).mount('#app')

is this a broken change or a bug?

What is expected?

vue2 Rendering results:

<p>this is a component!</p>

What is actually happening?

vue@3.0.0-alpha.8 Rendering results:

<customcomponent text="this is a component!"></customcomponent>

---

i'm trying to rewrite the jsx-plugin,
but found h('custom-component') doesn't work.

[underfin]

It doesn't work with this?

setup() {
     return () => h(customComponent, { text: 'this is a component!' })
}

[yyx990803]

v3 no longer supports rendering component using strings, since when you are using render functions you can always use the direct value. This also enables better compiler optimizations.

If you have to use a global registered component in render functions, use resolveComponent:

import { resolveComponent } from 'vue'

// inside render function
const comp = resolveComponent('customComponent')
return h(comp)