Tengo varios módulos de componentes con estilo en un archivo exportado que quiero importar dinámicamente a otro archivo.
Aprendí a importar un módulo, tenemos que hacer esto.
const Heading = dynamic(
() => import("./style").then((module) => module.Heading),
{
ssr: false,
}
);
¿Cómo puedo importar todos los módulos a la vez en lugar de importarlos por separado para cada módulo del mismo archivo?
Lo que quiero lograr es algo como esto pero me da error cargar todos los componentes en una sola importación
const {Heading , CustomError }= dynamic(
() => import("./style").then((module) => module),
{
ssr: false,
}
);
Advertencia: no uso Next.js (¿todavía?). Pero tratando de ayudar de todos modos:
Creo que la naturaleza de dynamic es que crea y devuelve una fachada de un solo componente cuando la llama, por lo que tendrá que realizar varias llamadas a dynamic . Pero eso no significa que tengas que repetirlo todo. A menos que dynamic sea una pseudofunción que se reemplace en el momento de la compilación, puede proporcionarse un ayudante para hacer el trabajo pesado:
const dynamicStyle = (name) => dynamic(
() => import("./style").then((module) => module[name]),
{ ssr: false }
);
Entonces al menos cada componente es más simple y no (eso) repetitivo:
const Heading = dynamicStyle("Heading");
const CustomError = dynamicStyle("CustomError");
Sobre esto:
¿Cómo puedo importar todos los módulos a la vez en lugar de importarlos por separado para cada módulo del mismo archivo?
Sospecho que quiso decir "... para cada componente del mismo archivo..." En caso de que le preocupe que el módulo se importe varias veces, no lo haga. Independientemente de cuántas veces llame a import("./style") , el módulo solo se importa una vez . Si el módulo ya está importado o se está importando la segunda/tercera/cuarta vez que llama a import() , las promesas de esas llamadas simplemente se cumplen con el mismo objeto de espacio de nombres del módulo que hizo/será el primero. Eso está efectivamente garantizado por la especificación donde dice:
Cualquier llamada posterior a HostResolveImportedModule después de que se haya completado FinishDynamicImport, dados los argumentos que hacen referencia a ScriptOrModule y specifier , debe devolver una finalización normal que contenga un módulo que ya se haya evaluado, es decir, cuyo método concreto Evaluate ya se haya llamado y devuelto una finalización normal.