Vue3/Nuxt3/Vite下变量路径动态导入组件不生效问题

• Vue 3.2
• Nuxt 3.0.0-rc.4
• Vite 2.9

通过<component :is />语法，使用变量存储的组件路径而非硬编码静态字符串，实现组件动态加载。

以下为实现逻辑的最小复现示例：

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

  const filepathStatic = '../foobar/Foobar.vue'

  const bar = 'bar'
  const filepathDynamic = `../foobar/Foo${bar}.vue` // 符合所有动态导入格式要求

  const asyncComponent = defineAsyncComponent(() => {
    return import('../foobar/Foobar.vue') // 正常运行
    
    return import(filepathStatic) // 运行失效
    return import(filepathDynamic) // 运行失效
  })
</script>

<template>
  <div>
    <component :is="asyncComponent" />
  </div>
</template>

1. Vite 报错
   报错提示：The above dynamic import cannot be analyzed by vite.
   提示当前动态导入语法无法被Vite静态分析，可查阅动态导入变量的支持格式与限制说明；如果确认当前写法不需要调整，可在import()调用内部添加/* @vite-ignore */注释屏蔽该警告。
   经确认，当前使用的动态文件路径完全符合规则要求。

2. Nuxt 报错
   服务端抛出500错误，错误信息如下：

500
Cannot read properties of undefined (reading 'stubModule')

at __instantiateModule__ (./.nuxt/dist/server/server.mjs:4094:11)
at __ssrLoadModule__ (./.nuxt/dist/server/server.mjs:4085:25)
at ssrImport (./.nuxt/dist/server/server.mjs:4110:13)
at ssrDynamicImport (./.nuxt/dist/server/server.mjs:4121:12)
at ./.nuxt/dist/server/server.mjs:2808:14
at load (/node_modules/.pnpm/@vue+runtime-core@3.2.37/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:2255:17)
at setup (/node_modules/.pnpm/@vue+runtime-core@3.2.37/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:2308:24)
at callWithErrorHandling (/node_modules/.pnpm/@vue+runtime-core@3.2.37/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:157:22)
at setupStatefulComponent (/node_modules/.pnpm/@vue+runtime-core@3.2.37/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7084:29)
at setupComponent (/node_modules/.pnpm/@vue+runtime-core@3.2.37/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7039:11)

同一逻辑下，直接给import()传入硬编码的静态路径字符串可以正常运行，传入提前定义的变量存储路径、模板字符串拼接的路径均会触发报错，暂时无法定位问题根因。

内容的提问来源于stack exchange，提问作者Chris