[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

[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