Estoy tratando de cargar un json dinámicamente basado en una variable de cadena, sin embargo, cuando trato de usar incluso la variable más básica que contiene una cadena, aparece un error, mientras que cuando uso la cadena funciona bien.
const configLoader = async () => { const pathVariable = './file.json'; const fileName = 'file'; const configFile = await import('./file.json'); // Works! const configFile = await import(pathVariable); // Doesn't work! const configFile = await import(`./${fileName}.json`); // Doesn't work! }El error
Invalid call at line 34: import(pathVariable)Está utilizando una herramienta, como WebPack, que resuelve las importaciones en tiempo de compilación.
Requiere que pase literales de cadena ya que el valor de las variables generalmente no se puede conocer hasta el tiempo de ejecución.
Consulte la documentación de WebPack :
Expresiones dinámicas en import()
No es posible utilizar una declaración de importación totalmente dinámica, como import(foo). Porque foo podría ser potencialmente cualquier ruta a cualquier archivo en su sistema o proyecto.
El import() debe contener al menos alguna información sobre dónde se encuentra el módulo. La agrupación se puede limitar a un directorio específico o a un conjunto de archivos, de modo que cuando utilice una expresión dinámica, se incluyan todos los módulos que podrían solicitarse en una llamada import(). Por ejemplo, import(./locale/${language}.json`) hará que cada archivo .json en el directorio ./locale se empaquete en el nuevo fragmento. En tiempo de ejecución, cuando se haya calculado el idioma variable, cualquier archivo como english.json o german.json estará disponible para su consumo.
// imagine we had a method to get language from cookies or other storage const language = detectVisitorLanguage(); import(`./locale/${language}.json`).then((module) => { // do something with the translations });