How to resolve a dynamic component ?

Hello,

I have to load dynamically some components.

I have define a component resolver.

import { defineAsyncComponent } from 'vue';

const components = import.meta.glob('@/Components/Challenges/**/*.vue');

export const resolveComponent = (view) => {
    const componentPath = `@/Components/${view}.vue`;

    const loader = components[componentPath];

    if (!loader) {
        throw new Error(`Component not found: ${componentPath}`);
    }

    return defineAsyncComponent(loader);
}

Then I use this resolver in a component.

const challengeComponent = computed(() => {
    const component = props.challengeTypes?.[0]?.creatorForm;

    if (!component) {
        return null;
    }

    return resolveComponent(component);

});

And I want to display the component.

<component :is="challengeComponent"></component>

I get this error.

componentResolver.js:11 Uncaught (in promise) Error: Component not found: @/Components/Challenges/Word/Creator/Form.vue

But the component exists.

resolve: {
    alias: {
        '@': path.resolve(__dirname, 'resources/js'),
        '@img': '/resources/img',
    },
    extensions: ['.js', '.vue']
},

Any idea how to solve this ?

Thanks for your help.

vincent15000

4 weeks ago

Level 63

I have replace @ by .. and it works.

Why does @ not work in this code ?

imranbru

3 weeks ago

Best Answer

Level 4

At runtime, when you attempt to access components['@/Components/...'], the lookup fails because that literal string does not match the transformed keys stored in the object.

You can solve it by this way Use relative paths for both the glob pattern and the resolver logic. This ensures the keys are predictable and consistent.

import { defineAsyncComponent } from 'vue';

// Use a relative path here const components = import.meta.glob('./Challenges/**/*.vue');

export const resolveComponent = (view) => { const relativePath = ./${view.replace('Challenges/', '')}.vue;

const loader = components[relativePath];

if (!loader) {
    throw new Error(`Component not found: ${relativePath}`);
}

return defineAsyncComponent(loader);

}

1 like

Please or to participate in this conversation.