"Object(...) is not a function" and "this.$refs.root is undefined" when using vue-flatpickr-component

Question

I'm trying to use the Node package vue-flatpickr-component in a Vue class component, with the following vue template code:

<flat-pickr
    class="form-control"
    :config="flatpickr"
    v-model="form.data.date"
    :model-value="form.data.date"
    name="date"
/>

This is the relevant TypeScript code in the component:

@Component({
components: { 'flat-pickr': flatpickr },
})
export default class ClassComponent extends Vue {

    public form = {
        data: {
            date: '2021-01-01',
            // ...
        },
        // ...
    };

    public flatpickr = {
        wrap: true,
        altFormat: 'M j, Y',
        altInput: true,
        dateFormat: 'Y-m-d',
    };

    // ...
}

However, I'm getting the following errors:

[Vue warn]: Error in render: "TypeError: Object(...) is not a function"

found in

---> <FlatPickr>
      <PriceChecker> at src/main/webapp/app/core/price-checker/price-checker.vue
        <App> at src/main/webapp/app/app.vue
          <Root>

and:

[Vue warn]: Error in mounted hook: "TypeError: this.$refs.root is undefined"

found in

---> <FlatPickr>
       <PriceChecker> at src/main/webapp/app/core/price-checker/price-checker.vue
         <App> at src/main/webapp/app/app.vue
           <Root>

Even when I remove all the attributes from the <flat-picker> element except for the model-value, I get the same errors.

What could be wrong here, and does anyone know how I can fix it?

Answer 1

This error occurs when a Vue 2 project uses the latest release of vue-flatpickr-component (9.x), which is intended for Vue 3 projects. To use the Vue 2 compatible version of the component, install 8.x:

npm install -S vue-flatpickr-component@8