Vue进度组件导入报错：无法解析JS语法，如何修复？

问题描述 #

我有一个用于展示进度的Vue组件，代码如下：

<script setup>
    const props = defineProps(['currentStep']);
    const steps = [1, 2, 3];
</script>


<nav aria-label="Progrès">
    <ol role="list" class="flex items-center">
        <li v-for="step in steps" class="relative pr-8 sm:pr-20">
            <div class="absolute inset-0 flex items-center" aria-hidden="true">
                <div :class="{
                    'h-0.5 w-full bg-orange-600': (currentStep >= step),
                    'h-0.5 w-full bg-gray-200': !(currentStep >= step)
                }"
                ></div>
            </div>
            <a href="#" class="relative flex h-8 w-8 items-center justify-center rounded-full bg-orange-600 hover:bg-orange-900">
                <svg v-if="(currentStep > step)" class="h-5 w-5 text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                </svg>
                <span v-if="(currentStep == step)" class="h-2.5 w-2.5 rounded-full bg-orange-600" aria-hidden="true"></span>
                <span v-if="(currentStep < step)" class="h-2.5 w-2.5 rounded-full bg-transparent group-hover:bg-gray-300" aria-hidden="true"></span>


                <span class="sr-only">Étape 1</span>
            </a>
        </li>
    </ol>
</nav>

其中currentStep是1到4之间的数字。尝试在另一个组件中导入该组件时，出现报错：

"[plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension."

错误原因 #

这个报错的核心原因是Vite无法识别当前文件的语法格式，大概率是因为进度组件文件的扩展名不正确——没有使用Vue单文件组件专属的.vue后缀，导致Vite将其当作普通JS文件解析，而文件内的模板部分属于非JS语法，从而触发解析错误。

解决方案 #

1. 修正文件扩展名：确保进度组件的文件后缀为.vue，比如命名为ProgressSteps.vue，不要使用.js、.ts等其他扩展名。
2. 检查导入路径：在导入组件的地方，确保路径中包含完整的.vue后缀，示例：

   import ProgressSteps from './components/ProgressSteps.vue'
   

   （若Vite配置中开启了resolve.extensions并包含.vue，也可省略后缀，但显式写出能避免多数路径匹配问题）

额外优化建议 #

可以给defineProps添加类型校验，明确约束currentStep的范围，避免传入不符合要求的值：

const props = defineProps({
  currentStep: {
    type: Number,
    required: true,
    validator: (value) => {
      return value >= 1 && value <= 4
    }
  }
})

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