Failed to mount component: using vue-c3

Question

I tried using https://www.npmjs.com/package/vue-c3 for rendering my c3 charts in vue. It worked some time ago, but now it started giving (in VueC3):

"vue.runtime.esm.js?ff9b:587 [Vue warn]: Failed to mount component: template or render function not defined."

even when using a code from a tutorial:

<template>
 <div>
  <vue-c3 :handler="handler"></vue-c3>
 </div>
</template>

<script>
 import Vue from 'vue'
 import VueC3 from 'vue-c3'

 export default {
  name: ...,
  components: {
   VueC3
  },

  data () {
    return {
    handler: new Vue()
   }
  }
}
</script>

How can I fix this?

Answer 1

I faced the same exact problem. In my case it seems the bug was introduced after upgrading vue-c3 package to its latest version (v1.2.5 at the time of writing).

What I did was to temporarily stick to our previous version (v1.1.1) in package.json (until it is fixed):

{ "vue-c3": "1.1.1" }

and worked again.

Answer 2

If you import Vue from 'vue'; you get the runtime only build that cannot compile templates so you need the standalone build, here is a small tutorial that explain this: https://v2.vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only