Estoy tratando de crear un componente que me permita pasar el nombre del ícono que estoy buscando e importar ese ícono dinámicamente a través de íconos de desconexión, parece que no funciona cuando la ruta para la importación es dinámica. Si tuviera que escribir una cadena, funciona bien. ¿Alguna sugerencia? Estoy usando Nuxt 3 y Vite.
interface Icon { name: string; } const props = defineProps<Icon>(); const sun = "sun"; const icon = await import(`~icons/fa-solid/${sun}`); const PropIcon = defineComponent(icon.default);A continuación se muestra el error que recibo
const props = __props; 12 | const sun = "sun"; 13 | const icon = ([__temp, __restore] = _withAsyncContext(() => import(`~icons/fa-solid/${sun}`)), __temp = await __temp, __restore(), __temp); | ^ 14 | const PropIcon = defineComponent(icon.default); 15 | const __returned__ = { props, sun, icon, PropIcon }; The above dynamic import cannot be analyzed by vite. See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.Intenté usar /* vite ignore */ pero no funcionó
A continuación se muestra la versión codificada que funciona
interface Icon { name: string; } const props = defineProps<Icon>(); const sun = "sun"; const icon = await import(`~icons/fa-solid/sun`); const PropIcon = defineComponent(icon.default);A continuación se muestra la importación estándar
import IconSun from "~icons/fa-solid/sun";Pues vite ya te doy la respuesta solo léela:
Si se pretende dejar esto como está, puede usar el comentario /* @vite-ignore */ dentro de la llamada import() para suprimir esta advertencia.
Vite no puede analizar el módulo de importación porque no puede saber el valor de sun
Debe suprimir este error si esto es lo que se pretende:
const icon = await import( /* @vite-ignore */` ~icons/fa-solid/${sun}`);