MUI DateRangePicker引入DateRange提示未找到导出项如何解决

该问题是MUI X日期选择器组件版本迭代带来的导出规则变更，本地安装的依赖版本和复制的示例代码对应的版本不匹配，属于该组件库升级后非常高发的适配问题。

• 先确认本地安装的@mui/x-date-pickers-pro实际版本，在项目根目录执行对应包管理命令查看版本：

  # npm用户执行
  npm list @mui/x-date-pickers-pro
  # yarn用户执行
  yarn list @mui/x-date-pickers-pro
  # pnpm用户执行
  pnpm list @mui/x-date-pickers-pro
  

• 如果本地版本为v6及以上：
  注意：v6版本之后所有组件的关联类型都统一从包根路径导出，单组件子路径仅导出组件本身，DateRange类型已经不再从@mui/x-date-pickers-pro/DateRangePicker子路径导出，直接调整导入语句即可：

  // 旧版错误导入写法
  import { DateRangePicker, DateRange } from '@mui/x-date-pickers-pro/DateRangePicker';
  
  // v6+正确写法
  // JS项目不需要类型的话，直接删掉DateRange相关导入即可
  import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
  // TS项目需要单独从包根路径引入类型
  import type { DateRange } from '@mui/x-date-pickers-pro';
  

• 如果本地版本为v5及更早：
  子路径@mui/x-date-pickers-pro/DateRangePicker下仅导出DateRangePicker组件本身，不导出关联类型，把DateRange的导入路径调整为包根路径即可，写法和上述v6+的导入规则一致。
• 后续复制官方示例代码前，先把文档站点的版本切换到和本地安装版本完全一致，避免再出现API、导出规则不匹配的问题。
• 额外校验：确认已经安装完所有要求的peer依赖，包括@mui/material、@mui/system，以及dayjs/date-fns/moment/luxon四个日期处理库中的任意一个，避免触发其他连带导出错误。

内容的提问来源于stack exchange，提问作者lewis machilika