Nuxt项目集成vue-chartjs时出现编译及运行报错的原因

报错根因 #

该问题本质是依赖版本适配错位：

• 执行yarn add vue-chartjs chart.js安装依赖时，包管理器会拉取最新正式版本，目前chart.js v3.x及以上版本已经彻底移除了默认导出（default export），改为具名导出的模块化结构
• vue-chartjs v3.x及更早版本的核心代码，是按照chart.js v2的导出规范编写的，内部会尝试从chart.js导入默认导出的Chart构造函数，因此会触发"export 'default' was not found in 'chart.js'的编译警告，最终在浏览器运行时抛出xxx.default is not a constructor的类型错误。

修复方案 #

方案1：锁定兼容版本，最小改动适配现有代码 #

如果不需要使用新版图表的特性，可直接安装互相适配的版本组合，不需要改动已编写的业务逻辑：

• 先卸载当前安装的不匹配版本依赖

  yarn remove vue-chartjs chart.js
  

• 安装经过长期验证的兼容版本组合

  yarn add vue-chartjs@3.5.1 chart.js@2.9.4
  

• 针对Nuxt SSR环境补充配置：由于图表依赖浏览器端的Canvas API，需要避免服务端渲染时加载该组件，可选择两种方式之一：
  • 在nuxt.config.js中把图表组件标记为仅客户端渲染
  • 在index.vue页面中，用<client-only>标签包裹<bar-chart>组件

方案2：升级到最新版本组合，适配新API #

如果需要使用新版chart.js的性能优化和功能特性，可升级到互相适配的最新版本组合，同步调整原有代码逻辑：

• 安装最新的兼容版本组合

  yarn add vue-chartjs@4 chart.js@4
  

• 修改原有的~/components/BarChart.js组件代码，适配新版模块化要求：

  import { Bar } from 'vue-chartjs'
  import { 
    Chart as ChartJS, 
    Title, 
    Tooltip, 
    Legend, 
    BarElement, 
    CategoryScale, 
    LinearScale 
  } from 'chart.js'
  
  // 新版chart.js要求手动注册需要用到的功能模块
  ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
  
  export default {
    name: 'BarChart',
    components: { Bar },
    props: {
      data: { type: Object, required: true },
      options: { type: Object, default: () => ({}) }
    },
    template: `<Bar :data="data" :options="options" />`
  }
  

• 同样需要在Nuxt侧配置仅客户端渲染该组件，避免服务端报Canvas API未定义的错误。
• 注意：如果使用该升级方案，原代码中chart.js v2版本的坐标轴配置（xAxes/yAxes结构）、图例/提示框配置语法已被新版废弃，需要按照chart.js v3+的配置规范调整，否则会出现图表不显示坐标轴、样式异常的问题。

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