React+MUI项目集成x-date-formatters时出现Vite依赖预构建错误：date-fns包中缺失'./_lib/format/longFormatters'指定路径

我太懂这种明明文件就在眼前，工具却找不到的崩溃感了！咱们来一步步拆解这个问题，找出解决办法：

首先排查版本兼容性问题 #

你用的date-fns是v4.1.0，这是一个比较新的大版本，而@mui/x-date-pickers是v7.23.2。根据MUI的适配规则，v7版本的日期选择器目前只兼容date-fns v3.x系列，v4的API和文件结构有变动，导致MUI的代码找不到对应的路径。

解决步骤：

• 先降级date-fns到兼容版本，执行：

  npm install date-fns@^3.6.0
  

• 删除node_modules和package-lock.json（或yarn.lock），重新安装依赖后启动项目试试。

调整Vite的解析配置 #

如果降级后还是报错，可能是Vite默认的文件扩展名列表里没有包含.cjs，而date-fns里的longFormatters有.cjs格式的文件，导致Vite预构建时找不到。

修改vite.config.js：

import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
    plugins: [react()],
    resolve: {
        // 添加上.cjs扩展名，让Vite能识别这类文件
        extensions: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json', '.cjs']
    }
})

检查日期适配器的混用问题 #

看你的Storybook配置里用的是AdapterMoment，这个适配器依赖moment库，但你同时安装了date-fns——这种混用可能导致依赖冲突，或者某个隐性代码分支错误引入了date-fns的代码，触发错误。

建议：

• 如果你打算用moment作为日期处理库，直接卸载date-fns即可：

  npm uninstall date-fns
  

• 如果想切换到date-fns，把适配器换成AdapterDateFns，并安装对应包：

  npm install @mui/x-date-pickers/AdapterDateFns
  

  然后修改Storybook代码：

  // 替换原来的AdapterMoment导入
  import {AdapterDateFns} from '@mui/x-date-pickers/AdapterDateFns';
  
  // 在LocalizationProvider中使用新适配器
  <LocalizationProvider dateAdapter={AdapterDateFns}>
  

清理Vite预构建缓存 #

有时候Vite的预构建缓存会留存旧的依赖信息，导致奇怪的错误：

• 删除项目根目录下的node_modules/.vite文件夹
• 执行npm run dev -- --clear（对应yarn/pnpm命令可自行调整）强制清理缓存后启动项目

备注：内容来源于stack exchange，提问作者mikeb