在 vue 3 中使用 vue-chartjs：createElement 不是函数

Posted 2023-02-22

【中文标题】在 vue 3 中使用 vue-chartjs：createElement 不是函数

【英文标题】：using vue-chartjs in vue 3 : createElement is not a function

【发布时间】：2021-01-14 17:55:04

【问题描述】：

我正在使用 Vue.js 3，由于这个错误，我无法使用 Vue-chartjs 制作图表：

Uncaught TypeError: createElement is not a function
    at Proxy.render (BaseCharts.js?86fc:8)
    at renderComponentRoot (runtime-core.esm-bundler.js?5c40:673)
    at componentEffect (runtime-core.esm-bundler.js?5c40:4475)
    at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
    at effect (reactivity.esm-bundler.js?a1e9:17)
    at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4458)
    at mountComponent (runtime-core.esm-bundler.js?5c40:4416)
    at processComponent (runtime-core.esm-bundler.js?5c40:4376)
    at patch (runtime-core.esm-bundler.js?5c40:3991)
    at mountChildren (runtime-core.esm-bundler.js?5c40:4180)

这是显示我的图表的 App.vue：

<template>
  <line-chart />
</template>

<script>
import LineChart from "./components/Chart";
export default 

  name: "App",
  components: 
    LineChart
  
;
</script>

这是渲染折线图的 Chart.vue：

<script>
import  Line  from "vue-chartjs";
export default 
  extends: Line,
  data: () => (
    chartdata: 
      labels: ["January", "February"],
      datasets: [
        
          label: "Data One",
          backgroundColor: "#f87979",
          data: [40, 20]
        
      ]
    ,
    options: 
      responsive: true,
      maintainAspectRatio: false
    
  ),

  mounted() 
    this.renderChart(this.chartdata, this.options);
  
;
</script>

我已经尝试过使用各种形式的数据，但显然，问题出在其他地方。 是否必须等待 vue.js 3 生态系统变得更加完整？

【问题讨论】：

可能是因为这个v3.vuejs.org/guide/migration/…

谢谢，但我不这么认为。

【参考方案1】：

https://github.com/apertureless/vue-chartjs

Vue Charts 似乎还没有为 vue3 做好准备

兼容性

v1 later @legacy
    Vue.js 1.x
v2 later
    Vue.js 2.x

这里讨论vue3：https://github.com/apertureless/vue-chartjs/issues/601 在这里：https://github.com/apertureless/vue-chartjs/issues/637

【讨论】：

查看关于该问题的最后评论，这可能会使其工作......

查看此评论。它对我有用github.com/apertureless/vue-chartjs/issues/…

【参考方案2】：

根据这个issue，这个库还不支持Vue 3，这个错误的根源可以解释here：

在 vue 2 中，我们执行以下操作来创建渲染函数：

export default 
  render(createElement )  // createElement  could be written h
    return createElement('div')
  

在 Vue 3 中：

import  h  from 'vue'

export default 
  render() 
    return h('div')
  

这意味着createElement 未定义