Vuepress路由跳转侧边栏链接时报TypeError错误求助

问题场景 #

此前项目基于 Vue 2.6.11 运行正常，删除 package-lock.json、执行 rm -rf node_modules/ 后重新运行 npm i，依赖安装成功，但运行时出现如下错误：

vue.esm.js?a026:5059 [Vue warn]: Error in nextTick: "TypeError: Cannot read properties of undefined (reading 'on')"

found in

---> <RouterLink>
       <Navbar> at node_modules/@vuepress/theme-default/components/Navbar.vue
         <Layout> at node_modules/@vuepress/theme-default/layouts/Layout.vue
           <GlobalLayout> at node_modules/@vuepress/core/lib/client/components/GlobalLayout.vue
             <Root>
warn$2 @ vue.esm.js?a026:5059
vue.esm.js?a026:3732 TypeError: Cannot read properties of undefined (reading 'on')
    at setCurrentInstance (vue.esm.js?a026:564:1)
    at callHook$1 (vue.esm.js?a026:3098:1)
    at Object.insert (vue.esm.js?a026:4877:1)
    at invokeInsertHook (vue.esm.js?a026:6894:1)
    at VueComponent.patch [as __patch__] (vue.esm.js?a026:7105:1)
    at Vue._update (vue.esm.js?a026:2846:1)
    at VueComponent.updateComponent (vue.esm.js?a026:2947:1)
    at Watcher.get (vue.esm.js?a026:4119:1)
    at Watcher.run (vue.esm.js?a026:4195:1)
    at flushSchedulerQueue (vue.esm.js?a026:3193:1)
logError @ vue.esm.js?a026:3732
vue-router.esm.js?8c4f:16 [vue-router] uncaught error during route navigation:
warn @ vue-router.esm.js?8c4f:16
vue-router.esm.js?8c4f:2316 TypeError: Cannot read properties of undefined (reading 'on')
    at setCurrentInstance (vue.esm.js?a026:564:1)
    at callHook$1 (vue.esm.js?a026:3109:1)
    at watcherOptions.onTrigger (vue.esm.js?a026:2959:1)
    at Dep.notify (vue.esm.js?a026:780:1)
    at Vue.reactiveSetter [as _route] (vue.esm.js?a026:1019:1)
    at eval (vue-router.esm.js?8c4f:3003:1)
    at Array.forEach (<anonymous>)
    at HTML5History.eval [as cb] (vue-router.esm.js?8c4f:3002:1)
    at HTML5History.updateRoute (vue-router.esm.js?8c4f:2414:1)
    at eval (vue-router.esm.js?8c4f:2263:1)

解决方案 #

1. 锁定Vue版本到2.6.x #

Vue 2.7作为过渡版本，引入了部分Vue 3的API调整，和旧版@vuepress/theme-default存在兼容性问题。直接在package.json中指定兼容的Vue版本：

"dependencies": {
  "vue": "~2.6.11"
}

执行以下命令重新安装依赖：

rm -rf node_modules/ package-lock.json
npm install

2. 升级VuePress到兼容Vue 2.7的版本 #

若想保留Vue 2.7，需升级VuePress核心及主题版本，确保其支持Vue 2.7：

npm update @vuepress/core @vuepress/theme-default

升级完成后重新执行npm install并启动项目。

3. 清理npm缓存 #

缓存可能导致版本解析异常，执行以下命令清理后重装：

npm cache clean --force
rm -rf node_modules/ package-lock.json
npm install

原因说明 #

Vue 2.7对内部currentInstance相关逻辑做了修改，而旧版VuePress的组件（如Navbar中的RouterLink）依赖Vue 2.6的内部API实现，版本不匹配导致了该报错。

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