Vue3+Vuetify3.0.1中VOverlay相关组件报vue-warn错误求助

问题现象 #

使用Vue3搭配Vuetify3.0.1、Options API开发时，所有涉及VOverlay的组件（v-dialog、v-tooltip、v-overlay）均触发以下错误：

runtime-core.esm-bundler.js?d2dd:40 [Vue warn]: Unhandled error during execution of watcher callback 
  at <VOverlay ref=Ref< undefined > class="v-dialog" width="500"  ... > 
  at <VDialog modelValue=false onUpdate:modelValue=fn width="500" > 
  at <VMain> 
  at <VApp> 
  at <App>
warn @ runtime-core.esm-bundler.js?d2dd:40
runtime-core.esm-bundler.js?d2dd:40 [Vue warn]: Unhandled error during execution of setup function 
  at <VOverlay ref=Ref< undefined > class="v-dialog" width="500"  ... > 
  at <VDialog modelValue=false onUpdate:modelValue=fn width="500" > 
  at <VMain> 
  at <VApp> 
  at <App>

Uncaught TypeError: globalStack.at is not a function
    at eval (webpack-internal:///./node_modules/vuetify/lib/composables/stack.mjs:36)
    at callWithErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:286)
    at callWithAsyncErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:295)
    at ReactiveEffect.getter [as fn] (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:1858)
    at ReactiveEffect.run (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:225)
    at doWatch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:1973)
    at watchEffect (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:1778)
    at useStack (webpack-internal:///./node_modules/vuetify/lib/composables/stack.mjs:34)
    at Object.setup [as _setup] (webpack-internal:///./node_modules/vuetify/lib/components/VOverlay/VOverlay.mjs:151)
    at setup (webpack-internal:///./node_modules/vuetify/lib/util/defineComponent.mjs:62)

相关代码示例：

App.vue #

<template>
  <v-app>
    <v-dialog v-model="dialog">
      <template v-slot:activator="{ props }">
        <v-btn color="primary" v-bind="props"> Open Dialog </v-btn>
      </template>
    </v-dialog>
  </v-app>
</template>

<script lang="ts">
export default {
  name: "App",
  data() {
    return {
      dialog: false,
    };
  },
};
</script>

main.ts #

import { createApp } from "vue";
import store from "./store/planner";
import vuetify from "./plugins/vuetify";
import App from "./App.vue";
import router from "./router";
import i18n from "./i18n";

const app = createApp(App);
app.use(vuetify).use(router).use(store).use(i18n);
app.mount("#app");

问题原因 #

Array.prototype.at()是ES2022新增的数组方法，当前项目的运行环境（浏览器版本过低或打包工具未配置对应polyfill）不支持该方法，而Vuetify3.0.1的内部代码依赖此方法实现栈操作。

解决方案 #

方案1：升级浏览器 #

确保开发/生产环境使用支持ES2022的浏览器版本：

• Chrome ≥ 89
• Edge ≥ 89
• Firefox ≥ 90
• Safari ≥ 15.4

方案2：添加Polyfill #

若需兼容旧浏览器，手动引入Array.prototype.at的polyfill：

1. 安装依赖：

npm install array.prototype.at --save-dev

2. 在main.ts最顶部添加以下代码：

import 'array.prototype.at';

// 兜底兼容处理（可选）
if (!Array.prototype.at) {
  Array.prototype.at = function(index: number) {
    index = Math.trunc(index) || 0;
    if (index < 0) index += this.length;
    if (index < 0 || index >= this.length) return undefined;
    return this[index];
  };
}

方案3：升级Vuetify版本 #

Vuetify后续版本已修复该兼容性问题，升级到3.1.x及以上版本即可：

npm update vuetify@latest

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