React Web应用中无法使用material-ui-pickers问题求助

我之前在集成material-ui-pickers时也踩过这个坑，折腾了好一阵子才解决，分享几个靠谱的解决方案，按顺序试应该能搞定：

• 先确认date-fns版本是否匹配
  material-ui-pickers对date-fns的版本有严格要求，尤其是旧版本的picker（比如v3.x系列）只支持date-fns@2.x版本，如果你装了date-fns@3.x就会出现这个路径错误——因为3.x重构了模块结构，date-fns/format的路径已经变了。
  先去你的package.json里查看date-fns的版本，如果是3.x，先卸载重装正确的版本：

  npm uninstall date-fns
  npm install date-fns@2.30.0 # 选一个稳定的2.x版本即可
  

• 不要手动写绝对路径导入DateFnsUtils
  你尝试的../../../../node_modules/date-fns/form（应该是打错了，是format？）这种手动路径导入很容易出错，而且完全没必要。官方标准的导入方式是从@material-ui/pickers的适配器目录导入：

  import DateFnsUtils from '@material-ui/pickers/adapters/DateFnsUtils';
  

  这样webpack会自动去node_modules里找正确的路径，不会出现解析错误。

• 清除依赖缓存并重新构建
  有时候node_modules的缓存或者开发服务器的缓存会导致奇怪的模块解析问题，可以试试彻底清理后重装：

  # 删除依赖和锁文件
  rm -rf node_modules package-lock.json
  # 重新安装依赖
  npm install
  

  然后重启你的React开发服务器，再尝试运行项目。

• 检查webpack配置（自定义配置时）
  如果你的项目是自定义webpack配置，确保resolve.modules里包含了node_modules，这样webpack才能正确找到date-fns这类第三方模块。比如在webpack.config.js里：

  module.exports = {
    resolve: {
      modules: ['node_modules', path.resolve(__dirname, 'src')]
    }
  };
  

  默认情况下这个配置是存在的，但如果你之前修改过webpack配置，可能不小心删掉了。

如果以上步骤都试过还是不行，可以检查下你安装的material-ui-pickers版本是否正确，确保安装的是@material-ui/pickers（注意不是新版的@mui/x-date-pickers，两者导入方式不同），并且依赖的@material-ui/core也已经正确安装。

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