Vuetify 3组件在Chrome中报错：Uncaught TypeError: globalStack.at is not a function

问题分析 #

这个错误核心原因是Array.prototype.at()方法不被当前环境支持，Vuetify 3内部代码（如stack.ts文件）使用了这个ES2022新增的方法。即便升级Node.js，若浏览器版本过低、打包配置未引入必要polyfill，或依赖版本存在兼容性冲突，仍会触发该问题。

解决方案 #

1. 升级核心依赖版本 #

你当前使用的Vuetify和vite-plugin-vuetify版本较旧，存在已知兼容性问题，建议升级到以下稳定版本：

• vuetify升级至^3.3.0及以上
• vite-plugin-vuetify升级至^1.0.2及以上
• 同步升级vue到^{3.3.0、`vite`到}4.0.0版本，确保依赖匹配

修改后的package.json依赖示例：

{
  "name": "vuetify-project",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@mdi/font": "7.0.96",
    "roboto-fontface": "*",
    "vue": "^3.3.4",
    "vuetify": "^3.3.10",
    "webfontloader": "^1.0.0"
  },
  "devDependencies": {
    "@types/node": "^18.11.9",
    "@types/webfontloader": "^1.6.35",
    "@vitejs/plugin-vue": "^4.3.4",
    "typescript": "^5.2.2",
    "vite": "^4.4.9",
    "vite-plugin-vuetify": "^1.0.2",
    "vue-tsc": "^1.8.11"
  }
}

执行命令更新依赖：

npm install

2. 添加ES2022 Polyfill（升级后仍有问题时用） #

若需兼容较旧浏览器，在Vite配置中添加polyfill：

• 安装插件：

npm install @vitejs/plugin-legacy --save-dev

• 修改vite.config.ts：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'
import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  plugins: [
    vue(),
    vuetify({ autoImport: true }),
    legacy({
      targets: ['defaults', 'not IE 11'],
      additionalLegacyPolyfills: ['es.array.at']
    })
  ],
})

3. 检查浏览器版本 #

Array.prototype.at()在Chrome 92及以上版本支持，若你的Chrome版本过低，直接升级浏览器即可。

验证步骤 #

1. 删除旧依赖和锁文件：

rm -rf node_modules package-lock.json

2. 重新安装依赖
3. 启动开发服务器：npm run dev
4. 查看Chrome控制台，确认错误是否消失

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