definePage 导致devtools进行错误解析

我的新手，
使用npm create vuetify@latest构建的项目，
使用npm install vite-plugin-vue-devtools@latest安装了devtools，
当我在页面级组件中使用import { definePage } from "unplugin-vue-router/runtime";这个导入语句，
以及这个代码进行路由权限控制时

definePage({
  meta: {
    requiresAuth: true,
  },
});

会导致浏览器报这样的错误

不管这两段代码是否被注释掉，只要有 definePage 关键字出现就会触发这个错误 ，不知道这个该怎么解决

下面这个是我在router/index.tx中添加的代码

// Composables
import { createRouter, createWebHistory } from "vue-router/auto";
import { setupLayouts } from "virtual:generated-layouts";
import { routes } from "vue-router/auto-routes";

import { useAuthStore ,useSnackbarStore} from "@/stores/authStore"; // 引入 authStore
// 全局前置守卫
router.beforeEach((to, from, next) => {
  
  const  authStore = useAuthStore(); // 现在在路由准备好后初始化  
  
  const snackbarStore = useSnackbarStore(); // 新增
  const requiresAuth = to.meta.requiresAuth; // 检查目标路由是否需要认证

  if (requiresAuth && !authStore.isAuthenticated) {
    // 如果目标路由需要认证且用户未认证，重定向到首页
 snackbarStore.showMessage('请先进行权限认证！');
    next("/");
  } else {
    // 否则继续导航
    next();
  }
});

Reproduce with a project created by npm create vuetify@latest, install vite-plugin-vue-devtools@latest, and add the shown definePage import and metadata. Compare the browser error when the keyword is present or commented out, then inspect the devtools plugin handling of this source and verify the error no longer occurs.