React使用Material UI报错无法解析@date-io/date-fns依赖安装冲突问题

根因说明 #

• 你安装时指定的date-fns@next为测试beta版本（2.0.0-beta.5），不符合@date-io/date-fns要求的正式版^2.0.0版本规则
• 你当前使用的@material-ui/pickers@3.3.10仅兼容@date-io/date-fns@1.x版本，与最新的2.x版@date-io/date-fns不兼容，这是核心冲突点

解决步骤 #

1. 先卸载已安装的不匹配版本依赖：

npm uninstall date-fns @date-io/date-fns

2. 安装版本匹配的依赖组合：

npm install --save date-fns@2.x @date-io/date-fns@1.x

3. 若仍提示ERESOLVE依赖树错误，添加--legacy-peer-deps参数跳过npm 7+的严格依赖校验即可：

npm install --save date-fns@2.x @date-io/date-fns@1.x --legacy-peer-deps

验证可用 #

安装完成后即可正常引入使用日期组件，示例代码如下：

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

export default function App() {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DatePicker
        label="选择日期"
        value={selectedDate}
        onChange={handleDateChange}
      />
    </MuiPickersUtilsProvider>
  );
}

内容的提问来源于stack exchange，提问作者Ryan Fonseka