Vue 3 - "Unable to resolve component" warning

Question

I encountered this warning when trying to import a component from my index.js file.

This is my components folder:

components/
|-- index.js
|-- ComponentA.vue
|-- ComponentB.vue
|-- ComponentC.vue

and index.js:

import ComponentA from './ComponentA';
import ComponentB from './ComponentB';
import ComponentC from './ComponentC';

export { ComponentA, ComponentB, ComponentC };

When I try this in any component (B or C)

<script>
import { ComponentA } from './';

console.log(ComponentA); // undefined

export default {
    components: {ComponentA}
}
</script>

I get a warning in the console, how do I fix it? What am I doing wrong here?

By the way, this method works:

import ComponentA from './ComponentA';

But I don't want to use this method because I have many components in components folder

Answer 1

You should write the import statement in the following form:

<script>
import { ComponentA } from './components';

export default {
    components: { ComponentA }
}
</script>