React日历组件编译报错：无法导入非ES模块的differenceInHours命名导出

错误信息 #

Failed to compile.
./node_modules/date-fns/intervalToDuration.mjs
Can't import the named export 'differenceInHours' from non EcmaScript module (only default export is available)

问题原因 #

该错误源于date-fns版本与项目构建工具（如webpack/Create React App）的模块解析规则不兼容，部分ES模块格式的文件在CommonJS环境下无法被正确解析。你的日历组件代码本身逻辑无问题，冲突出现在date-fns内部依赖的加载环节。

解决方案 #

• 方案1：降级date-fns到稳定兼容版本
  部分v2.x版本的date-fns存在模块导出的兼容性问题，降级到经过验证的稳定版本即可解决：

  npm uninstall date-fns
  npm install date-fns@2.29.3
  

• 方案2：修改webpack模块解析配置
  若不想降级版本，可通过配置让webpack正确处理node_modules中的.mjs文件：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.mjs$/,
          include: /node_modules/,
          type: 'javascript/auto'
        }
      ]
    }
  };
  

  若使用Create React App，需借助react-app-rewired修改配置：

  1. 安装依赖：

     npm install react-app-rewired --save-dev
     

  2. 项目根目录创建config-overrides.js：

     module.exports = function override(config, env) {
       config.module.rules.push({
         test: /\.mjs$/,
         include: /node_modules/,
         type: 'javascript/auto'
       });
       return config;
     };
     

  3. 修改package.json的scripts：

     "scripts": {
       "start": "react-app-rewired start",
       "build": "react-app-rewired build",
       "test": "react-app-rewired test"
     }
     

• 方案3：临时改用默认导入排查
  虽然不推荐长期使用，但可通过默认导入验证是否为模块导出方式问题：

  import dateFns from 'date-fns';
  // 使用时替换为dateFns.format、dateFns.startOfMonth等形式
  

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