[Bug] Throws error related to TableDate when combined with @vue/compat

[jschill]

Vue-datepicker-next version: 1.0.3 Vue version: 3.2.47 Browser: All

Steps to reproduce Create a new vue-project (npm create vue@3). I did not select any specials, such as typescript, pinia, linting, testing... Just the bare minimal.

Add vue-datepicker-next. Created a new route for the picker. And pasted the example:

<script>
  import DatePicker from 'vue-datepicker-next';
  import 'vue-datepicker-next/index.css';

  export default {
    components: { DatePicker },
    data() {
      return {
        time0: null,
        time1: null,
        time2: null,
        time3: null,
      };
    },
  };
</script>

<template>
  <div>
    <date-picker v-model:value="time0"></date-picker>
    <date-picker v-model:value="time1" type="datetime"></date-picker>
    <date-picker v-model:value="time2" valueType="format"></date-picker>
    <date-picker v-model:value="time3" range></date-picker>
  </div>
</template>

Everything works just fine and the picker works.

Adding @vue/compat as dependency and adding the changes for it in vite.config.js:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({

  plugins: [vue({
    template: {
      compilerOptions: {
        compatConfig: {
          MODE: 2
        }
      }
    }
  })],
  resolve: {
    alias: {
      vue: '@vue/compat',
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Then the pickers stop working.

When i'm debugging TableDate, the arguments passed in are two functions, not a TableDateProps object. They are coming from convertLegacyAsyncComponent:

[fanta759]

Hi, i have the same issue, do you find any solution ?

[jschill]

Hi, i have the same issue, do you find any solution ?

@fanta759 No, sorry. vue-compat did not fill all the holes we wanted, so we had to change our upgrade strategy to a new one that does not include vue-compat.

[vhatsura]

I was managed to fix this specific issue disabling COMPONENT_ASYNC feature using

import { configureCompat } from 'vue'

// disable compat for certain features
configureCompat({
  COMPONENT_ASYNC: false,
})

however, after that I get the following error when selecting date:

vue.runtime.esm-bundler.js:1638 Uncaught TypeError: onSelect is not a function
    at handleCellClick (index.es.js:926:5)
    at callWithErrorHandling (vue.runtime.esm-bundler.js:1575:18)
    at callWithAsyncErrorHandling (vue.runtime.esm-bundler.js:1583:17)
    at HTMLTableCellElement.invoker (vue.runtime.esm-bundler.js:11171:5)

[Leftyx]

@fanta759, @jschill I am having the same issue. Did you manage to make it work at the end ?

[fanta759]

@Leftyx I use another datetimepicker

[Leftyx]

@Leftyx I use another datetimepicker

@fanta759 , Thanks for the swift reply. Appreciated. Which alternative did you use ?

[yujin1st]

also stumbled upon this issue, didn't find the solution

[kazuyoshi-yamada-wmj]

any update? i have same issue.

[fanta759]

@Leftyx @yujin1st @kazuyoshi-yamada-wmj I use this datetimepicker with Vue3 : https://vue3datepicker.com/