The render function cannot render global components

[dream2023]

Version

3.0.0-rc.6

Reproduction link

https://codepen.io/dream2023/pen/QWNGQrM

Steps to reproduce

1.createApp
2.register component

What is expected?

Global components should be rendered

What is actually happening?

It's not rendered. It's just a tag name

[dream2023]

[dream2023]

By the way, it works in template。

[yyx990803]

This is expected behavior in v3 Strings passed to h are always considered native elements. To use components you need to either explicitly import them or, if they are registered globally, resolve them with resolveComponent (see https://github.com/vuejs/rfcs/blob/master/active-rfcs/0008-render-function-api-change.md#context-free-vnodes).

[Fiv5]

This is expected behavior in v3 Strings passed to h are always considered native elements. To use components you need to either explicitly import them or, if they are registered globally, resolve them with resolveComponent (see https://github.com/vuejs/rfcs/blob/master/active-rfcs/0008-render-function-api-change.md#context-free-vnodes).

In my human opinion, it should explicitly show on the Migration Guide Docs.

[posva]

@Fiv5 can you opeen a PR or an issue at vuejs/docs-next repository to track it?

[Fiv5]

@Fiv5 can you opeen a PR or an issue at vuejs/docs-next repository to track it?

Sure, my pleasure!

[zq0904]

Is there an easy way to handle global components?
The custom component MyCustom uses a large number of global components, which cannot be resolved when I render using the h function.
Am I going to change the whole MyCustom to H function rendering?

// MyCustom.vue template
<div>
    <el-xxxA /> // Globally registered
    <el-xxxB /> // Globally registered
<div>

// App.vue
setup (props, content) {
    const handleModify = (row) => {
        ElMessageBox({
            title: 'xxx',
            message: h(MyCustom, { row: xxx })),
        })
    }
    
    return {
        handleModify
    }
}

Can you provide some parameters to resolve the global component？

1. content ?
2. h options?

[jerrywu001]

Sometimes resolveComponet is not applicable, for example, there are some globally registered components (ComA, ComB, ComC,...), and then use them with dynamic components through the h function

or just like:

• A toast tool in node_modules， the source code:

The first param in the toast function may be a component, the usage like:

• register some global components

app.component('CompA', CompA);
app.component('CompB', CompB);
// ...

If using some global register components in ToastComponent， it got "Failed to resolve component", because h function can not parse it.

TIPS: The ToastComponent component is used by others, so I can't use resolveComponent @yyx990803

[jerrywu001]

more detail:
jerrywu001/vue3-toastify#22