We have a component hosted on the cloud (like npm) and we want it to be able to do dynamic imports.

The above component, gets a prop with a path where possible components will be located. Then on load, it will try to import some components from the given path.

lets say thats our import code:

function loadDynamicComponent(componentsPath) {
    let Component;

    try {
        Component = React.lazy(() =>
            import(`${componentsPath}/${component}`)
        );
    } catch {
        Component = () => <div>No Component found by the name: {component}</div>;
    }

    return Component;
}

Now as we understand, Webpack must receive at least one relative level within the import path before it can use dynamic path variable.

something like that will work:

Component = React.lazy(() =>
   import(`../components/${componentsPath}/${component}`)
);

But as we use a component that itself is imported from outer source and not our project folders, we need the path to be fully dynamic like that:

Component = React.lazy(() =>
   import(`${componentsPath}/${component}`)
);

Does anyone has an idea of how something like that can be achieved?

BTW, we use Creat-React-App as a boilerplate, but if ejecting will help solving the problem we are happy to hear about it too :)

Thanks a lot in advance!!!!