如何修复unplugin-vue-components实现中的模块解析错误？

问题描述 #

配置unplugin-vue-components自动注册自研插件组件时，遇到Vite无法识别单文件组件（SFC）中命名导出的问题，控制台报错：

An error occurred: The requested module '/flighter/resources/js/components/LinkWrapper.vue' does not provide an export named 'FlighterLinkWrapper' SyntaxError: The requested module '/flighter/resources/js/components/LinkWrapper.vue' does not provide an export named 'FlighterLinkWrapper'

生成的components.d.ts片段：

// ...
FlighterLink:typeof import('flighter/js/components/Link.vue')['FlighterLink'];
FlighterLinkWrapper:typeof import('flighter/js/components/LinkWrapper.vue')['FlighterLinkWrapper'];
FlighterMapLink:typeof import('flighter/js/components/links/Map.vue')['FlighterMapLink'];
// ...        

vite.config.ts配置片段：

// ...
resolve: {
    alias: [
        {find: '@js/', replacement: path.resolve(__dirname, `resources/js`) + '/'},
        {find: /^@?flighter\//, replacement: path.resolve(__dirname, `flighter/resources`) + '/'}    ],
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
},
// ...

LinkWrapper.vue内容片段：

<script lang="ts" setup>
// ...
</script>

<script lang="ts">
export default {
    name: 'FlighterLinkWrapper'
};
</script>

已排除路径解析问题，推测为文件解析或模块名称匹配问题。

技术栈：Laravel 10 / InertiaJS 1 / VueJS 3 / ViteJS 4 / TailwindCSS 3 / Vitest 0.31 / VitePress 1 / Typescript / SSR，以及FontAwesome Pro 6、Ploi.io等工具。

解决方案 #

1. 修正组件的命名导出逻辑 #

使用<script setup>时，Vue不会自动生成组件的命名导出，仅在普通<script>中定义name选项无法满足unplugin-vue-components的识别要求，需显式添加命名导出：

<script lang="ts" setup>
// 保留原有组件逻辑
// ...

// 显式导出组件，匹配components.d.ts中的命名
import { defineComponent } from 'vue'
export const FlighterLinkWrapper = defineComponent({
  name: 'FlighterLinkWrapper'
})
</script>

<!-- 可移除原普通script标签，或保留name选项确保名称一致 -->

2. 配置unplugin-vue-components自定义解析器 #

在vite.config.ts中添加针对自研flighter组件的解析规则，确保组件名称与文件路径、导出名称匹配：

import Components from 'unplugin-vue-components/vite'
import { ComponentResolver } from 'unplugin-vue-components/types'

// 自定义解析器处理Flighter前缀组件
const FlighterResolver: ComponentResolver = {
  type: 'component',
  resolve: (name) => {
    if (name.startsWith('Flighter')) {
      // 将FlighterXXX转换为对应的组件文件名
      const componentFileName = name.replace('Flighter', '')
      return {
        importName: name,
        path: `flighter/js/components/${componentFileName}.vue`
      }
    }
  }
}

export default defineConfig({
  plugins: [
    // ...其他插件
    Components({
      dts: true,
      resolvers: [FlighterResolver],
      // 确保扫描范围覆盖flighter组件目录
      include: [/\.vue$/, /\.vue\?vue/, /flighter\/resources\/js\/components\/.+\.vue$/],
    })
  ],
  // ...已有resolve配置
})

3. 完善Typescript配置 #

在tsconfig.json中添加Vue类型支持与路径别名，确保TS能正确解析组件模块：

{
  "compilerOptions": {
    // ...其他配置
    "types": ["vue", "unplugin-vue-components"],
    "paths": {
      "@js/*": ["./resources/js/*"],
      "flighter/*": ["./flighter/resources/*"]
    }
  },
  "include": ["resources/**/*", "flighter/resources/**/*"]
}

4. 清除缓存并重启服务 #

执行命令清除Vite缓存，再重启开发服务：

rm -rf node_modules/.vite
npm run dev

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