【踩坑】vite项目使用ant＜a-date-picker /＞提示报错 rr.isMoment is not a function 解决方法

最新推荐文章于 2025-07-04 15:57:14 发布

原创最新推荐文章于 2025-07-04 15:57:14 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #webpack #javascript

文章描述了一个在Vite项目中使用antdv的日期选择器组件时遇到的`moment.isMomentisnotafunction`错误。作者分析了错误原因，可能是由于antd与vite的兼容性问题。尝试了引入cdn资源和各种插件修复未果。最终提出了两种解决方案：一是将项目改为vue-cli或webpack构建；二是通过vite-plugin-antd-use-dayjs插件将antd中的moment替换为dayjs，成功解决了日期选择器的问题。

1、问题描述

项目技术栈：vue@2.6.10、ant-design-vue@1.7.8、vite@2.8.0

在 vite 项目中，使用 antdv <a-date-picker/> 组件通过 disabledDate 参数限制可选日期时，发现无法选中日期，控制台提示报错：rr.isMoment is not a function

2、分析原因

经排查，报错代码位于 antd 框架内置 moment-util.js 文件 moment.isMoment 方法。由于 antd 主要是通过 webpack 方式打包的，分析可能是低版本 antd 没有完全兼容 vite 开发环境，然而 ant-design-vue@1.7.8 已经不再支持维护了…… 既然这是源码报错，那要怎么办呢？

3、解决方法

起初通过全网搜寻解决方法，却发现没有相关技术文章。尝试通过 cdn 方式引入 antd.min.js，然而并没有解决问题……

<script src="https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.8/dist/antd.min.js"></script>

由于是框架源码出现异常，不太好改动，只能通过引入插件方式打补丁，在 npmjs 官网找到相应插件 ant-design-vue-vite、ant-design-vue-vite-fix、vite-plugin-antdv-fix，然而在项目引入这些插件后，依旧没能解决这个报错问题……

在经过一番探索后，终于找到两个还不错的解决方法。

1）方法一：调整项目构建工具（彻底性解决）

直接将 vite 项目改用 vue-cli 或 webpack 构建工具，这是最直接的解决方法，能彻底解决依赖兼容问题。不过，对于开发程度较高的项目而言，此时调整项目构建工具的成本可能会大一些。

2）方法二：替换Moment插件（针对性解决）

既然这个报错本质上是 antd 内置 moment.isMoment( ) 方法执行异常，那么换一个思路，能否绕过这个日期库的报错呢？

经过查询相关资料发现，通过引入插件可修改 antdv 内置 moment ，在 npmjs 官网找到相关插件 antd-dayjs-webpack-plugin、antd-dayjs-vite-plugin、vite-plugin-antd-use-dayjs 等。经过实践后，发现引入 vite-plugin-antd-use-dayjs 插件能实现将 antd 内置 moment 转成 dayjs，绕过源码的 isMoment 报错问题，成功解决 date-picker 选值异常问题。

npm i @wry-smile/vite-plugin-antd-use-dayjs

// vite.config.js 或 vite.config.ts 
import { vitePluginAntdUseDayjs } from '@wry-smile/vite-plugin-antd-use-dayjs'
export default defineConfig({
  plugins: [
    // default locale zh-cn
    vitePluginAntdUseDayjs.vite(),
  ],
})

执行代码可见，<a-date-picker /> @change 方法输出值不再是moment格式，而是dayjs格式。