Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Ref conflicts with Global components: Invalid vnode type when creating vnode: .

See original GitHub issue

Version

3.2.31

Reproduction link

stackblitz.com

Steps to reproduce

I have created a global component named QRadio as you can see in main.js. In App.vue, I use that component but I am also trying to create a ref to pass a reactive value to that component.

It seems that I can’t use qRadio as a ref name because it somehow conflicts with the Global component.

What is expected?

The name of the ref should not conflict with the name of the global component

What is actually happening?

I get an error: Invalid vnode type when creating vnode: .

If I change the name qRadio of the ref then everything works

Issue Analytics

State:
Created 2 years ago
Comments:8 (5 by maintainers)

Top GitHub Comments

1reaction

posvacommented, Feb 18, 2022

Closing as this is working as intended as it’s also the first line in docs: https://vuejs.org/api/sfc-script-setup.html#using-components

Values in the scope of <script setup> can also be used directly as custom component tag names:

0reactions

lidlancacommented, Feb 18, 2022

when I said confusing I meant visually conflicting/similar. for example names that are just slightly different (ex capital letter) which is especially a problem where template have case insensitivity and more hidden logic.

BottomSheet bottomSheet

HelloWorld helloWorld

qButton QButton

Top Results From Across the Web

Vue 3 - [Vue warn]: Invalid vnode type when creating vnode

I have the following code: <script setup> import {ref, defineAsyncComponent, computed, reactive} from 'vue' import {useMainStore} from ...

inferno

Inferno is an insanely fast, React-like library for building high-performance user interfaces on both the client and server.

Rendering a list of Vue components - Learn web development

To help Vue optimize rendering the elements in the list, it tries to patch list elements so it's not recreating them every time...

Invalid vnode type when creating vnode - Get Help

I am trying to use in my AppVue view to switch between different layouts, but when I access the page, the following warning...

vendor.e7008001a8bed009bbf1.js.map

vue/dist/vue.esm.js","webpack:///(webpack)/buildin/global.js","webpack:///. ... if ( text === void 0 ) text = '';\n\n var node = new VNode();\n node.text ...