dynamic glob imports don't work in SSR

[cdwmhcc]

Environment

---

• Operating System: Windows_NT
• Node Version: v16.14.2
• Nuxt Version: 3.0.0-rc.3
• Package Manager: yarn@1.22.17
• Builder: vite
• User Config: globalName, app, css, alias, modules, colorMode, buildDir, vue, vite
• Runtime Modules: @nuxtjs/color-mode@3.0.3, nuxt-lodash@2.2.0, @vueuse/nuxt@8.5.0
• Build Modules: -

---

Reproduction

<template>
    <div>
        <component is="icon"></component>
    </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from 'vue'

const name = 'plus'
const icon = defineAsyncComponent(() =>
    import(`@/components/v/icon/${name}.vue`)
);
</script>

Describe the bug

import cannot use dynamic variables.

✅ : import('@/components/v/icon/plus.vue')
❌ : import(`@/components/v/icon/${name}.vue`)

4  |    setup(__props, { expose }) {
5  |      expose();
6  |      const icon = defineAsyncComponent(() => import(`@/components/v/icon/${name}.vue`));
   |                                                     ^
7  |      const __returned__ = { icon };
8  |      Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
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.

  Plugin: vite:import-analysis

Additional context

Related issue: #12655

Logs

No response

[516310460]

Imports must start with ./ or ../.
Other solutiions

1. nuxt.config.ts ssr: false
2. const icon = defineAsyncComponent(() => import(./components/${name}.vue))

I hope I can help you

[danielroe]

let's track in #12806