Render error in Vue3

[mpancewicz]

I can't make it work in Vue3. During render I got warning "Property "$createElement" was accessed during render but is not defined on instance." Essentially _vm.$createElement is undefined.

Here's my component:

<template>
  <vue-svg-map :map="Taiwan"></vue-svg-map>
</template>

<script>
import { SvgMap } from 'vue-svg-map';
import Taiwan from '@svg-maps/taiwan';

export default {

  components: {
    'chart': Chart,
    'vue-svg-map': SvgMap,
  },

    data() {
        return {
            Taiwan
        };
    }

}
</script>

[VictorCazanave]

Thank you for reporting this issue @mpancewicz! This component was built for Vue 2, then I'm not surprised it doesn't work directly with Vue 3.

I'll try to make it compatible when I have free time (probably not before 2 weeks 😥). If you know how to fix it (keeping the Vue 2 compatibility), feel free to open a PR!

[mpancewicz]

Thanks, I'd try to fix it, but as we all do I also have a problem with a free time.

[Neon22]

I have a similar problem. It doesn't look to me like both v2 and v3 can be serviced by the same code but then again maybe only the wrapper needs to have two versions as the options API still works in v3.

I don't know enough but I'll leave this here because it looks like how to change the three .vue files :

• https://learnvue.co/2020/02/building-the-same-component-in-vue2-vs-vue3/

[VictorCazanave]

Thank you for the link @Neon22!

My initial plan was to keep the same components (hoping they would be compatible with Vue 3) and update the wrapper to support both Vue 2 and Vue 3, but I didn't find any resources about how to do that. Then, now I'm thinking to still keep the options API, to modify the components as less as possible (probably only the v-model), and create a new wrapper for Vue 3.

[Neon22]

Also leaving this here - allows packaging for Vue2 and 3 at the same time... magical https://github.com/vueuse/vue-demi

Ran into it here: https://vueuse.org/

[MoeBensu]

@VictorCazanave

My initial plan was to keep the same components (hoping they would be compatible with Vue 3) and update the wrapper to support both Vue 2 and Vue 3, but I didn't find any resources about how to do that.

wrapper.js could be easily made vue-3 compatible and also typed for ts support.

However, I identified multiple breaking changes in code, besides v-model, and also some necessary changes in the build config, etc. You might want to check out the migration build. Maybe, it is easier having a @next version of the plugin instead of maintaining compatibility for vue-2 and vue-3 in the same place.

[matzborba]

Is there already a version that works in vue 3?

[VictorCazanave]

However, I identified multiple breaking changes in code, besides v-model, and also some necessary changes in the build config, etc. You might want to check out the migration build. Maybe, it is easier having a @next version of the plugin instead of maintaining compatibility for vue-2 and vue-3 in the same place.

(Very late) Thanks for your feedback!

Is there already a version that works in vue 3?

Not yet. I'll try to work on it in the following weeks.

[dholly]

any updates on vue 3 version?