Vite+Vue项目启动报错：Cannot set properties of undefined (setting 'id')

执行yarn hot与php artisan serve --port=8001启动服务后，访问localhost触发报错：Cannot set properties of undefined (setting 'id')。控制台提示报错关联文件为App.vue，但该文件中未找到任何与'id'属性相关的代码。已尝试重启服务、清理缓存，问题依旧。

完整报错信息 #

[vite] Internal Server Error
Cannot set properties of undefined (setting 'id')
    at createDescriptor (C:\Users\Bohdan\Desktop\nowa\headless-client-cms\node_modules\@vitejs\plugin-vue\dist\index.js:4010:17)
    at transformMain (C:\Users\Bohdan\Desktop\nowa\headless-client-cms\node_modules\@vitejs\plugin-vue\dist\index.js:4350:34)
    at TransformContext.transform (C:\Users\Bohdan\Desktop\nowa\headless-client-cms\node_modules\@vitejs\plugin-vue\dist\index.js:4739:16)
    at Object.transform (C:\Users\Bohdan\Desktop\nowa\headless-client-cms\node_modules\vite\dist\node\chunks\dep-6e2fe41e.js:39317:53)
    at async doTransform (C:\Users\Bohdan\Desktop\nowa\headless-client-cms\node_modules\vite\dist\node\chunks\dep-6e2fe41e.js:50043:29)

yarn hot控制台报错 #

[vite] Internal server error: Cannot set properties of undefined (setting 'id') 
Plugin: vite:vue 
File: C:/Users/Bohdan/Desktop/nowa/headless-client-cms/resources/js/components/App.vue

App.vue 代码 #

<template>
  <div v-if="loaded">
    <MyFileManager v-if="isFileManager" />
    <router-view v-else/>
  </div>
</template>

<script lang="ts">
  import {users, locales, labels} from "@/http";
  import {Component, Vue} from 'vue-property-decorator';
  import MyFileManager from "@/components/views/MyFileManager.vue";
  @Component({
    components: {MyFileManager}
  })
  export default class App extends Vue{

    get loaded(): boolean
    {
      return Object.keys(this.preLoads).filter(key => {
        return this.preLoads[key] === true;
      }).length === Object.keys(this.preLoads).length;
    }

    preLoads = {
      currentLocale: false,
      translatableLabels: false
    };

    get isFileManager(): boolean {
      return  window.name === 'fileManager';
    }

    mounted() {
      this.$store.commit('setCurrentUser', this.$roleService.authUser);

      locales.currentLocale().then(({data: {availableLocales}}) => {
        this.$store.commit('set', ['currentLocale', localStorage.getItem('locale') ?? 'en']);
        this.$store.commit('set', ['availableLocales', availableLocales])
      }).finally(() => this.preLoads.currentLocale = true);

      labels.list().then(({data}) => {
        const translatableLabelsObject = data.reduce((carry, next) => {
          carry[next.translation_key] = next;
          return carry;
        }, {});
        this.$store.commit('set', ['translatableLabelsArray', data])
        this.$store.commit('set', ['translatableLabels', translatableLabelsObject])
      }).finally(() => this.preLoads.translatableLabels = true);

      window.addEventListener('beforeunload', users.updateLastSeenAt);

      this.$store.commit('set', ['settings', {
        logo: (document.getElementById('logo') as HTMLInputElement).value
      }]);

      const settingsData = this.$roleService.settings;
      const settingsObject = settingsData.reduce((carry, next) => {
        carry[next.identifier] = next.value;
        return carry;
      }, {});
      this.$store.commit('set', ['settings', settingsObject]);
      this.$store.commit('set', ['settingsArray', settingsData]);
    }
  }
</script>

<style lang="scss">

.vdatetime-popup__header {
  text-align: center;
}

   @media screen and (max-width: 500px) {
     .sm-hidden {
       display: none;
     }
   }

</style>

排查与解决方案 #

• 检查子组件语法：报错指向App.vue，但问题可能出在导入的MyFileManager组件中。暂时注释掉<MyFileManager />的引用，重新编译测试，若报错消失，说明该子组件存在语法问题（比如模板错误、TS类型定义问题），需排查修复。
• 修复Vite Vue插件兼容性：报错来自@vitejs/plugin-vue的createDescriptor方法，大概率是插件版本与当前Vite/Vue版本不匹配。尝试更新插件到最新稳定版：

  yarn add @vitejs/plugin-vue@latest
  

  若更新后问题依旧，可回退到已知兼容的版本（如4.3.4）：

  yarn add @vitejs/plugin-vue@4.3.4
  

• 清理深层缓存：除常规重启服务外，手动删除项目根目录下的node_modules/.cache文件夹，再执行yarn cache clean和yarn install重新安装依赖。
• 检查Vue实例注入变量：确认$roleService、$store等全局变量已正确注入Vue实例。若这些变量未初始化，可能在编译阶段间接引发错误。可尝试简化mounted钩子中的代码，逐步排查哪段逻辑触发了问题。
• 验证模板语法规范：虽然App.vue模板看似正常，但需确认没有隐式语法错误（如标签未闭合、v-if/v-else结构不完整）。可暂时简化模板为最基础的结构，逐步恢复代码定位问题。

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