升级element-plus 从2.0.5 到2.1.9版本是出现Uncaught (in promise) TypeError: day.isValid is not a function异常问题
2022年4月16日
现象
原vue页面当中有el-date-picker组件，在使用element-plus 2.0.5的版本下能正常使用。但是当升级到2.1.9版本后，只要vue代码当中包含el-date-picker组件的都会出现渲染报错。异常内容如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
picker.vue:228 Uncaught (in promise) TypeError: day.isValid is not a function at parser (picker.vue:228:14) at ReactiveEffect.fn (picker.vue:403:11) at ReactiveEffect.run (reactivity.esm-bundler.js:185:25) at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js:1126:39) at unref (reactivity.esm-bundler.js:1034:29) at Object.get (reactivity.esm-bundler.js:1037:37) at Object.get (runtime-core.esm-bundler.js:6742:24) at picker.vue:144:25 at renderFnWithContext (runtime-core.esm-bundler.js:852:21) at renderSlot (runtime-core.esm-bundler.js:6627:55) |
也有出现这样的异常：
|
1 2 3 4 5 6 7 8 9 10 11 |
Uncaught (in promise) TypeError: (0 , import_dayjs11.default)(...).locale(...).add is not a function at setup (panel-date-range.vue:293:54) at callWithErrorHandling (runtime-core.esm-bundler.js:155:22) at setupStatefulComponent (runtime-core.esm-bundler.js:7109:29) at setupComponent (runtime-core.esm-bundler.js:7064:11) at mountComponent (runtime-core.esm-bundler.js:4951:13) at processComponent (runtime-core.esm-bundler.js:4926:17) at patch (runtime-core.esm-bundler.js:4518:21) at mountChildren (runtime-core.esm-bundler.js:4714:13) at processFragment (runtime-core.esm-bundler.js:4885:13) at patch (runtime-core.esm-bundler.js:4511:17) |
跟踪源码发现是在调用dayjs对象的时候出现的异常。
问题解决
当前项目使用到了i18n国际化，同时集成element-plus的时候也配置了国际化，代码示例如下：
|
1 2 3 4 5 6 7 |
<el-config-provider :locale="i18nLocale"> <router-view v-show="getThemeConfig.lockScreenTime !== 0" /> </el-config-provider> const state = reactive({ i18nLocale: "zh-cn" }); |
在使用2.0.5的版本下，这个locale属性是支持直接使用字符串的，但是在2.1.9的版本下（不确定从何版本开始）必须使用一个带name属性的对象。正确的配置如下：
|
1 2 3 4 5 6 |
<el-config-provider :locale="i18nLocale"> <router-view v-show="getThemeConfig.lockScreenTime !== 0" /> </el-config-provider> const state = reactive({ i18nLocale: {name:'zh-cn'} }); |
至此问题解决！
About The Author
