Child component cannot render when there is same named data.

[ustbhuangyi]

Version

3.0.5

Reproduction link

https://codesandbox.io/s/divine-fog-7wep8?file=/src/App.vue

Steps to reproduce

Open this page

What is expected?

HelloWorld component rendered.

What is actually happening?

HelloWorld component do not render..

[HcySunYang]

This is because the helloWorld is analyzed as the binding of setup(SETUP_MAYBE_REF) when compileScript analyzes the bindings. It will generate the following code:

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock(_Fragment, null, [
    _hoisted_1,
    _createTextVNode(" " + _toDisplayString($setup.helloWorld) + " ", 1 /* TEXT */),
    _createVNode($setup["helloWorld"], { msg: "Hello Vue 3 in CodeSandbox!" })
  ], 64 /* STABLE_FRAGMENT */))
}

Here, $setup["helloWorld"] is problematic.

[HcySunYang]

Workaround: As long as the component name in the template is not the same as the binding, there will be ok.

[yingpengsha]

The source code clearly states that setup components take precedence over user components. Maybe it's not a bug, It's counterintuitive though. @HcySunYang
https://github.com/vuejs/vue-next/blob/58c46d77eac05ee72f17aa2669239c4d7c9a3abe/packages/compiler-core/src/transforms/transformElement.ts#L260

[HcySunYang]

This is not about component priority, it is about components/directives and data name conflicts

[yingpengsha]

Maybe it should be resolved in resolveComponent.

[ovidiuc]

Not sure if this is related, but if you have a child component named ChildComponent and setup data named childComponent (so not the same name, but the first letter lowercased) the child also doesn't render. I'm leaving here the console warnings I get, so people can find this bug when searching for a solution:

[Vue warn]: Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead. 

or sometimes:

[Vue warn]: Invalid vnode type when creating vnode: null.

https://codesandbox.io/s/wonderful-meadow-p8nb6?file=/src/components/ParentComponent.vue

I would say this is not necessary a minor bug, as the label suggests. I've ran into the situation twice already in a short period of time, trying to upgrade an existing vue 2 codebase. And with different console warnings, so had to investigate both times, a lot of time wasted. Imagine a production site having important parts of the page gone missing with no clue as to what is going on.