[Bug] when the program environment is vite3, after build page is console.error(Uncaught TypeError: s.default.locale is not a function)

[liulei92]

Vue2-datepicker version: 1.0.2 Vue version: 3.2+ Vite version: 3.1+ Browser: chorme

Steps to reproduce 1.vite build 2.preview folder dist, page console.error Uncaught TypeError: s.default.locale is not a function

the error from:

function Lc(e) { var t = e.default; if (typeof t == "function") { var n = function() { return t.apply(this, arguments) }; n.prototype = t.prototype } else n = {}; return Object.defineProperty(n, "__esModule", { value: !0 }), Object.keys(e).forEach(function(r) { var s = Object.getOwnPropertyDescriptor(e, r); Object.defineProperty(n, r, s.get ? s : { enumerable: !0, get: function() { return e[r] } }) }), n } var Rc = { exports: {} };

const jc = Lc(Nc); (function(e, t) { (function(n, r) { e.exports = r(jc) } )(Tl, function(n) { function r(i) { return i && typeof i == "object" && "default"in i ? i : { default: i } } var s = r(n) , o = { months: ["\u4E00\u6708", "\u4E8C\u6708", "\u4E09\u6708", "\u56DB\u6708", "\u4E94\u6708", "\u516D\u6708", "\u4E03\u6708", "\u516B\u6708", "\u4E5D\u6708", "\u5341\u6708", "\u5341\u4E00\u6708", "\u5341\u4E8C\u6708"], monthsShort: ["1\u6708", "2\u6708", "3\u6708", "4\u6708", "5\u6708", "6\u6708", "7\u6708", "8\u6708", "9\u6708", "10\u6708", "11\u6708", "12\u6708"], weekdays: ["\u661F\u671F\u65E5", "\u661F\u671F\u4E00", "\u661F\u671F\u4E8C", "\u661F\u671F\u4E09", "\u661F\u671F\u56DB", "\u661F\u671F\u4E94", "\u661F\u671F\u516D"], weekdaysShort: ["\u5468\u65E5", "\u5468\u4E00", "\u5468\u4E8C", "\u5468\u4E09", "\u5468\u56DB", "\u5468\u4E94", "\u5468\u516D"], weekdaysMin: ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"], firstDayOfWeek: 1, firstWeekContainsDate: 4, meridiemParse: /上午|下午/, meridiem: function(a) { return a < 12 ? "\u4E0A\u5348" : "\u4E0B\u5348" }, isPM: function(a) { return a === "\u4E0B\u5348" } }; const l = { formatLocale: o, yearFormat: "YYYY\u5E74", monthFormat: "MMM", monthBeforeYear: !1 }; return s.default.locale("zh-cn", l), l }) } )(Rc);

-- s.default.locale("zh-cn", l), --

because: function LC was diff from the old version vite2

Reproduction Link or Source Code

Expected behavior

Actual behavior

[you6in]

Hi @liulei92. I have the same issue in my project. Vue 3, Vite 3. Maybe you already have a solution?

[liulei92]

Hi @liulei92. I have the same issue in my project. Vue 3, Vite 3. Maybe you already have a solution?

yes, I have a temporary solution: use the locale property instead of the component's default language

lang = datepickerLangs["en"]

const datepickerLangs = { zh: { formatLocale: { months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], monthsShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], weekdays: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"], weekdaysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], weekdaysMin: ["日", "一", "二", "三", "四", "五", "六"], firstDayOfWeek: 1, firstWeekContainsDate: 4, meridiemParse: /上午|下午/, meridiem: function meridiem(hour) { if (hour < 12) { return "上午"; }

    return "下午";
  },
  isPM: function isPM(input) {
    return input === "下午";
  }
},
yearFormat: "YYYY年",
monthFormat: "MMM",
monthBeforeYear: false

}, en: { formatLocale: { months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], weekdays: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], weekdaysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], weekdaysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], firstDayOfWeek: 0, firstWeekContainsDate: 1 } }, yearFormat: "YYYY", monthFormat: "MMM", monthBeforeYear: true };

[Katerinka28]

Hi @liulei92. I have the same issue in my project. Vue 3, Vite 3. Maybe you already have a solution?

i remove locale imports

import DatePicker from 'vue-datepicker-next'

// from this // import 'vue-datepicker-next/locale/uk' // import 'vue-datepicker-next/locale/ru' // import 'vue-datepicker-next/locale/en'

import 'vue-datepicker-next/index.css'

export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.use(DatePicker) })

[Katerinka28]

Hi @liulei92. I have the same issue in my project. Vue 3, Vite 3. Maybe you already have a solution? It works fine

<template lang="pug">
ClientOnly
  DatePicker(
    v-model:value="model"
    :lang="locales[locale]"
    @clear='model = []'
    v-bind='$attrs'
    @change='setVal'
  )
</template>

<script setup lang="ts">

const { locale } = useI18n()

const l = locale ||= 'uk'

const props = defineProps({
  modelValue: {},
})

const { modelValue } = toRefs(props)

const emit = defineEmits(['updateModel'])

const model = ref([])

const setVal = (e) => {
  emit('updateModel', model.value)
}

watch(modelValue, () => {
  model.value = modelValue.value
}, { deep: true, immediate: true })

const locales = {
  uk: {
    months: ['січень', 'лютий', 'березень', 'квітень', 'травень', 'червень', 'липень', 'серпень', 'вересень', 'жовтень', 'листопад', 'грудень'],
    monthsShort: ['січ', 'лют', 'бер', 'квіт', 'трав', 'черв', 'лип', 'серп', 'вер', 'жовт', 'лист', 'груд'],
    weekdays: ['неділя', 'понеділок', 'вівторок', 'середа', 'четвер', 'п’ятниця', 'субота'],
    weekdaysShort: ['нд', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'],
    weekdaysMin: ['нд', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'],
    firstDayOfWeek: 1,
    firstWeekContainsDate: 7,
  },
  ru: {
    months: ['январь', 'февраль', 'март', 'апрель', 'май', 'июнь', 'июль', 'август', 'сентябрь', 'октябрь', 'ноябрь', 'декабрь'],
    monthsShort: ['янв.', 'февр.', 'март', 'апр.', 'май', 'июнь', 'июль', 'авг.', 'сент.', 'окт.', 'нояб.', 'дек.'],
    weekdays: ['воскресенье', 'понедельник', 'вторник', 'среда', 'четверг', 'пятница', 'суббота'],
    weekdaysShort: ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'],
    weekdaysMin: ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'],
    firstDayOfWeek: 1,
    firstWeekContainsDate: 1,
  },
  en: {
    months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    weekdaysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
    firstDayOfWeek: 0,
    firstWeekContainsDate: 1,
  }
}
</script>

[naftali100]

is there a solution to this other then manually set the locales?

[yuhua-chen]

I came across this issue also. Workaround by this way and it works:

import DatePicker from 'vue-datepicker-next';
import 'vue-datepicker-next/locale/zh-tw.es'; // <-- import `es` version instead

export default defineNuxtPlugin((nuxtApp) => {
  const app = nuxtApp.vueApp.use(DatePicker);
})

[bf]

Thanks @yuhua-chen this is a great solution

[susanne99]

the error is still there i version 1.0.3