@vue/composition-api报No vue dependency found错误排查

核心原因 #

这个错误本质是ES模块静态导入的执行顺序和你预期的行顺序不一致导致的：ES模块加载时会按照依赖图深度优先遍历执行所有静态导入的模块，不会严格按照你在main.ts里写的导入行从上到下执行。
你当前的依赖链路存在提前触发composition-api调用的问题：

• main.ts静态导入了入口组件app.component.vue
• app.component.vue静态导入了get-metadata.ts
• get-metadata.ts静态导入了报错来源graph-query.ts
  如果graph-query本身、或者它依赖的apollo相关代码在模块顶层作用域就调用了composition-api的能力，这部分代码执行时你还没完成Vue.use(vueCompositionApi)的注册，就会抛出该错误。
  另外两种常见触发场景：
• 项目中存在多份重复的@vue/composition-api实例，你注册的是A实例，报错代码引用的是未注册的B实例
• 安装了Vue3版本的@vue/apollo-composable（v5及以上），和Vue2 + @vue/composition-api的环境不兼容

修复步骤 #

• 把composition-api注册逻辑移到main.ts绝对最顶部，不要抽成单独插件文件间接导入，避免依赖图遍历导致的注册滞后：

  // 这三行必须放在所有其他导入的最前面，不要在它前面写任何其他import
  import Vue from "vue";
  import VueCompositionApi from "@vue/composition-api";
  Vue.use(VueCompositionApi);
  
  // 之后再写所有其他导入
  import "./registerServiceWorker";
  import "./_core/plugins/global";
  import "./_core/plugins/cloudinary";
  import "./_core/plugins/gtm";
  // ... 其余原有导入和逻辑
  

• 检查报错的graph-query.ts文件，不要在模块顶层作用域直接调用composition-api、@vue/apollo-composable的API，把这类逻辑移到具体的业务函数/组件setup内部，等插件注册完成、业务实际调用时再执行。
• 校验@vue/apollo-composable版本，Vue2环境必须安装v4.x版本，v5及以上版本仅支持Vue3，会直接抛出依赖找不到的错误。
• 排查重复依赖问题，在构建配置里强制所有模块引用同一份@vue/composition-api实例，以vue-cli的vue.config.js为例：

  module.exports = {
    chainWebpack: config => {
      config.resolve.alias.set(
        "@vue/composition-api",
        require.resolve("@vue/composition-api")
      );
    }
  };
  

顺序验证 #

可以在Vue.use(vueCompositionApi)下加一行日志，再在graph-query.ts顶层加一行日志，刷新页面看控制台打印顺序，只要composition-api注册的日志在graph-query的日志之前打印，就说明执行顺序正常。

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