环境：Windows，vue 3.5.5

\path\to\project_name\ys-admin\src\views\Govern\TopAdd.vue 页面中，引入同级 components 目录中的 \path\to\project_name\ys-admin\src\views\Govern\components\TopForm.vue

---

TopAdd.vue 代码，如下：

<template>
    <div class="top-add-page">
        <TopForm :is-edit="false"></TopForm>
    </div>
    
</template>

<script>
import TopForm from './components/TopForm'

export default {
  name: 'TopAddForm', // name  不能同为 TopForm
  components: {
    TopForm
  }
}
</script>

---

components\TopForm.vue 代码如下：

<template>
  <div class="policy-detail-page">
    <div class="filter-content">
      <el-button size="small" type="primary" @click="handelSubmit">提交</el-button>
      <el-button v-if="isEdit" size="small" type="default" @click="$router.go(-1)">返回</el-button>
    </div>
    <el-form ref="postForm" :model="postForm" class="from-container" label-width="110px"  
v-loading.fullscreen.lock="formLoading" >
      <el-form-item label="头条标题">
        <el-col :span="15">
          <el-input v-model="postForm.title" placeholder="请输入标题" clearable></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="缩略图">
        <ThumbUpload
          :limit=1
          :multiple=false
          v-model="postForm.thumb"
        >
        </ThumbUpload>
      </el-form-item>
      <el-form-item label="摘要">
        <el-col :span="20">
          <tinymce-editor ref="brief"
            v-model="postForm.brief"
          >
          </tinymce-editor>
        </el-col>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import { createPolicy, viewPolicy, updatePolicy } from '@/api/policy.js'
import ThumbUpload from '@/components/Upload/thumb'
import TinymceEditor from '@/components/Tinymce'

export default {
  components: {
    ThumbUpload,
    TinymceEditor
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      postForm: {
        title: '',
        thumb: '',
        date: [],
        rank: '',
        support_way: '',
        charge_depart: '',
        industry: '',
        scale: '',
        age: '',
        brief: '',
        requirement: '',
        support_content: '',
        material: '',
        original_info: '',
        manual: ''
      },
      formLoading: false,
    }
  },
  methods: {
    handelSubmit () {

    }
  }
}
</script>

<style>
.filter-content {
  position: fixed;
  display: block;
  width: 100%;
  padding: 15px 0;
  top: 60px;
  background-color: #FFF;
  z-index: 1000;
  border-bottom: 1px solid #c2c2c2
}
.from-container {
  padding-top: 70px;
}
</style>

---

浏览器 console 中，出现了 vue 的神奇报错。如下：

vue.runtime.esm.js?2b0e:4478 Uncaught RangeError: Maximum call stack size exceeded
    at defineReactive$$1 (vue.runtime.esm.js?2b0e:1006)
    at initRender (vue.runtime.esm.js?2b0e:3496)
    at VueComponent.Vue._init (vue.runtime.esm.js?2b0e:4997)
    at new VueComponent (vue.runtime.esm.js?2b0e:5148)
    at createComponentInstanceForVnode (vue.runtime.esm.js?2b0e:3283)
    at init (vue.runtime.esm.js?2b0e:3114)
    at createComponent (vue.runtime.esm.js?2b0e:5972)
    at createElm (vue.runtime.esm.js?2b0e:5919)
    at createChildren (vue.runtime.esm.js?2b0e:6047)
    at createElm (vue.runtime.esm.js?2b0e:5948)

重点是在:

vue.runtime.esm.js?2b0e:4478 Uncaught RangeError: Maximum call stack size exceeded

---

排查了很久，甚至将整个 components/TopForm.vue 设置为最简单内容，都无法解决报错。因此，才发现了居然是 ___export default 中的 name 与 import TopForm from './components/TopForm.vue' 同名的缘故。

只需将 name 对应的名字修改为 TopAddForm 即可。（与 import 的名字不同即可）

<script>
import TopForm from './components/TopForm'

export default {
  name: 'TopAddForm', // name  不能同为 TopForm
  components: {
    TopForm
  }
}
</script>

image.png