Vue2升级vue-chartjs至4.1.1后编译提示vue未导出defineComponent

Vue 2项目升级vue-chartjs到4.1.1版本后编译失败，报错信息如下：

Failed to compile.

./node_modules/vue-chartjs/dist/index.js 85:11-26
"export 'defineComponent' was not found in 'vue'

报错由vue-chartjs包内的如下导入语句触发：

import { defineComponent, shallowRef, ref, watch, onMounted, onBeforeUnmount, toRaw, h, isProxy } from 'vue';

语句中所有从vue导入的API都会触发同类“导出不存在”报错。升级前使用vue-chartjs@3.5.1时项目可正常运行，相同依赖版本在空白测试项目中可正常编译，仅公司存量正式项目触发该问题。

当前项目相关依赖版本：

• chart.js: ^3.8.0
• vue: ^2.6.14
• vue-chartjs: ^4.1.1

首先排除基础版本匹配误区：vue-chartjs@4.1.1本身包含Vue 2兼容构建产物，空白项目可正常运行已经验证这一点，问题出在正式项目的依赖解析、构建配置、全局覆写逻辑和空白项目的差异上，按优先级从高到低排查：

• 检查是否缺失@vue/composition-api依赖及注册
  vue-chartjs 4.x的Vue 2兼容实现依赖Composition API，包本身不会自动安装该依赖。空白Vue2项目如果初始化时选了对应预设会自带该依赖，存量老项目如果没有手动安装、也没在Vue实例启动时注册插件，就会出现Vue包上找不到组合式API导出的问题。
  先执行安装：npm install @vue/composition-api@1.7.1
  随后在项目入口文件（通常为main.js）最顶部注册插件：

  import Vue from 'vue'
  import VueCompositionAPI from '@vue/composition-api'
  Vue.use(VueCompositionAPI)
  

  注意注册语句必须放在所有导入vue-chartjs相关组件的语句之前，否则依然会触发导出不存在的报错。

• 检查构建工具的模块解析规则
  大量存量Vue2项目会在webpack等构建工具中配置resolve.alias、resolve.mainFields规则，强制将vue指向vue/dist/vue.runtime.esm.js这类Vue2原生构建产物，跳过node_modules包自身package.json里的环境导出判断逻辑。vue-chartjs靠package.json内的exports/module字段判断运行环境，自动加载对应适配构建，如果构建配置覆写了vue的解析路径、或者锁死了第三方包的入口解析规则，就会错误加载面向Vue3的vue-chartjs产物，自然找不到Vue3才有的原生defineComponent等API。
  重点排查构建配置中针对vue的别名配置、第三方包入口解析规则，删除强制将vue指向固定构建文件的配置，或给vue-chartjs添加排除规则，不要让其走自定义的模块解析逻辑。如果是vue-cli生成的项目，检查vue.config.js里是否有手动修改webpack解析规则的代码。

• 检查node_modules依赖安装异常
  存量项目的锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml）存在历史缓存时，可能出现依赖提升异常：比如实际安装的vue版本和声明不一致、存在多版本vue实例、vue-chartjs安装不全缺失Vue2适配产物。
  执行全量清理：删除node_modules文件夹、删除所有锁文件，重新执行依赖安装。安装完成后检查两个路径：一是node_modules/vue/package.json的version字段是否确为2.6.x版本，二是node_modules/vue-chartjs/dist目录下是否存在Vue2适配的构建文件。
  如果使用pnpm作为包管理器，检查根目录.npmrc是否开启shamefully-hoist=true，未开启时的依赖提升异常也会导致第三方包找不到对应导出。

• 检查是否存在Vue对象全局覆写
  部分老项目会通过全局脚本、webpack插件注入自定义vue实现，或给vue包添加polyfill覆写原生导出对象，比如部分老旧埋点插件、全局组件注册逻辑会修改vue的导出，导致第三方包导入vue时拿到的是被篡改过、缺失组合式API导出的对象。
  可以临时在vue-chartjs报错的dist文件顶部加日志console.log(require('vue'))，打印实际拿到的vue对象，检查对象上是否存在defineComponent、ref等导出，如果对象本身缺失这些属性，顺着调用栈往上排查是哪个环节修改了vue的导入结果。

• 检查babel转译规则是否误处理第三方包
  正常babel配置会排除node_modules下的文件，如果项目babel-loader配置将vue-chartjs纳入了转译范围，可能错误处理包内的环境判断代码，把原本Vue2环境下要走的兼容分支转成Vue3分支代码，导致加载Vue3专属API。检查babel配置的exclude规则，确保vue-chartjs不在强制转译范围内；如果是vue-cli项目，检查vue.config.js里的transpileDependencies配置，若包含vue-chartjs先移除再重试编译。

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