MUI X Date Picker V4搭配date-fns报getYearText不存在错误如何解决

问题原因 #

该报错由依赖版本不兼容导致：@material-ui/pickers v3.3.10仅支持@date-io系列依赖的1.x版本，你当前安装的@date-io/date-fns v2.11.0版本移除了getYearText等旧版本接口，触发调用失败。

修复方案（两种二选一即可） #

方案1：降级@date-io/date-fns版本（无需修改业务代码，推荐） #

• 先卸载现有高版本依赖：

npm uninstall @date-io/date-fns
# 如使用yarn则执行：yarn remove @date-io/date-fns

• 安装1.x分支的最新版本：

npm install @date-io/date-fns@1.x
# 如使用yarn则执行：yarn add @date-io/date-fns@1.x

• 确认应用根组件外层已正确包裹日期工具提供者：

import DateFnsUtils from '@date-io/date-fns';
import { MuiPickersUtilsProvider } from '@material-ui/pickers';

export default function App() {
  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      {/* 原有业务代码，包含DateTimePicker组件 */}
    </MuiPickersUtilsProvider>
  )
}

方案2：升级日期选择器到适配v2版本的MUI X Date Pickers #

如果不想降级依赖，可以将@material-ui/pickers替换为MUI X v4版本的日期选择器，同步调整组件引入和API调用逻辑即可适配@date-io/date-fns v2.x版本。

修改完成后重新安装依赖、启动项目即可解决崩溃问题。

内容的提问来源于stack exchange，提问作者Martin Devillers