Vue3打包部署后报错：Uncaught (in promise) Error

部署后打开网页报错信息：Uncaught (in promise) Error: useModal() can only be used inside setup() or functional components!

该报错在本地运行无法复现，只有run build之后，部署到服务器上，进入这个页面就会出现报错，并且伴随网页其他页面也卡死。首先我们先看下简化后的关键代码：

<template>
  <div>
    <button @click="handleDetail">详情</button>
    <TaskDetailModal ref="registerModal" @register="registerModal" @success="handleSuccess" />
  </div>
</template>

<script lang="ts" setup>
  import { reactive, onMounted, provide } from 'vue';
  import { useModal } from '/@/components/Modal';
  import TaskDetailModal from './components/TaskDetailModal.vue';

  const [registerModal, { openModal }] = useModal();

  /**
   * 详情
   */
  function handleDetail(record: Recordable) {
    openModal(true, {
      record,
      isUpdate: false,
    });
  }

  /**
   * 成功回调
   */
  function handleSuccess() {
    (selectedRowKeys.value = []) && reload();
  }
</script>

 我们看到报错是有关于useModal() hook的，在我们确保引入路径，没有问题的情况下，代码看上去一片祥和，因为本地启动的服务也不会报错。问过deepseek及翻阅多篇资料找到如下原因：

1. ‌调用位置检查‌：严格限制 useModal() 的使用范围，仅在 setup() 或函数式组件内调用。
2. ‌异常捕获‌：为所有异步操作添加 .catch() 或 try-catch，避免未处理的 Promise 异常‌25。
3. ‌代码规范‌：遵循 Vue 3 的 Composition API 设计模式，分离逻辑与视图。

很显然，这块代码都没有这些问题，在苦思不得解的时候，大佬告知ref="registerModal" 的值与函数registerModal重名，遂移除ref="registerModal"这一无用属性，这个问题便解决了。

问题原因推测是方法和refs是在同一作用域下，可能会有覆盖问题，导致方法无法调用。

若有大佬能有更好的见解，欢迎在评论区留下您宝贵的评论\(^o^)/~