为什么我在使用 Nuxt3 时不能使用动态导入

Question

I am trying to create a component that will let me pass in the name of the icon I am looking for and import that icon dynamically via unplugin-icons, it seems to be not working whenever the path for the import is dynamic. If I were to just type a string it works fine. Any suggestions? I am using Nuxt 3 and 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);

Below is the error I recieve

 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.

I tried to use the /* vite ignore */ but it did not work

Below is the hardcoded version which works

interface Icon {
    name: string;
}
const props = defineProps<Icon>();

const sun = "sun";
const icon = await import(`~icons/fa-solid/sun`);
const PropIcon = defineComponent(icon.default);

Below is the standard import

import IconSun from "~icons/fa-solid/sun";

Answer 1

Well vite already give you the answer just read it:

If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

Vite cannot analyze the importing module because it cant know the value of sun

You need to surpress this error if this is intended:

const icon = await import( /* @vite-ignore */` ~icons/fa-solid/${sun}`);