Tenemos un componente alojado en la nube (como npm) y queremos que pueda realizar importaciones dinámicas.

El componente anterior obtiene un accesorio con una ruta donde se ubicarán los posibles componentes. Luego, al cargar, intentará importar algunos componentes de la ruta dada.

digamos que ese es nuestro código de importación:

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

Ahora, como entendemos, Webpack debe recibir al menos un nivel relativo dentro de la ruta de importación antes de que pueda usar la variable de ruta dinámica.

algo así funcionará:

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

Pero como usamos un componente que en sí mismo se importa de una fuente externa y no de nuestras carpetas de proyecto, necesitamos que la ruta sea completamente dinámica de esa manera:

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

¿Alguien tiene una idea de cómo se puede lograr algo así?

Por cierto, usamos Creat-React-App como repetitivo, pero si la expulsión ayuda a resolver el problema, también nos alegra saberlo :)

¡¡¡¡Muchas gracias por adelantado!!!!