You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Import patterns that work without errors in vue dev server & build can cause imports during tests to break with just the following error as output:
[Vue warn]: Invalid vnode type when creating vnode: undefined.
at <App ref="VTU_COMPONENT" >
at <VTUROOT>
This is a big issue for us because we have a large project and it is difficult to find the chain of imports that causes this, the error provides no useful information
Steps to reproduce
I have made a simple reproduction example based on a new project created with npm create vue@latest:
Running this example with npm run dev show it's working without warnings in browser, however when running npm run test:unit, you will see an error. The error is shown as a warning but actually causes components to be undefined while rendering, so it breaks the app during tests and can cause further errors.
Weirdly enough, the order of imports seems to be relevant here. If you go to /ui/components/index.ts and change the order of the two exports, the error goes away! The error also disappears if we remove the import from from '@/ui' in ComponentA.vue
Expected behaviour
No warnings or issues during tests because there are no errors when running the app. At the very least, there should be an indication of why the warning is occurring and how to fix it.
Actual behaviour
A warning is shown in console, and the component that was imported will be undefined, causing further problems during testing, with no hints for the user on how to fix it.
Possible Solution
I don't have a good solution other than avoiding broad imports from parents as much as possible eg no from @/ui anywhere in the ui/ folder
The text was updated successfully, but these errors were encountered:
Doeke
changed the title
This import pattern causes imported component to be undefined only during tests
This import pattern causes imported component to be undefined in tests
Sep 9, 2024
Import pattern breaks component imports
Import patterns that work without errors in vue dev server & build can cause imports during tests to break with just the following error as output:
This is a big issue for us because we have a large project and it is difficult to find the chain of imports that causes this, the error provides no useful information
Steps to reproduce
I have made a simple reproduction example based on a new project created with
npm create vue@latest
:https://github.com/Doeke/bug-vue-vnode-undefined
Running this example with
npm run dev
show it's working without warnings in browser, however when runningnpm run test:unit
, you will see an error. The error is shown as a warning but actually causes components to be undefined while rendering, so it breaks the app during tests and can cause further errors.Weirdly enough, the order of imports seems to be relevant here. If you go to
/ui/components/index.ts
and change the order of the two exports, the error goes away! The error also disappears if we remove the import fromfrom '@/ui'
inComponentA.vue
Expected behaviour
No warnings or issues during tests because there are no errors when running the app. At the very least, there should be an indication of why the warning is occurring and how to fix it.
Actual behaviour
A warning is shown in console, and the component that was imported will be undefined, causing further problems during testing, with no hints for the user on how to fix it.
Possible Solution
I don't have a good solution other than avoiding broad imports from parents as much as possible eg no
from @/ui
anywhere in theui/
folderThe text was updated successfully, but these errors were encountered: