Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

This import pattern causes imported component to be undefined in tests #2099

Open
Doeke opened this issue Sep 9, 2024 · 0 comments
Open

Comments

@Doeke
Copy link

Doeke commented 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:

[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:

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 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

@Doeke 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant