React项目utils文件引入moment导出formatDate时触发导入编译错误

核心报错原因 #

导出识别失效的本质是CommonJS 导出语法与项目默认的 ES Module 模块规范混用，和第三方库本身没有直接关联：

• 你在 utils 文件中使用了 CommonJS 规范的exports.formatDate = xxx写法，同时又搭配了 ESM 规范的import moment from 'moment'语法，本身就存在模块规范不匹配的问题
• 当文件中没有引入第三方库时，打包器会触发简易的 CJS 兼容兜底逻辑，自动把挂载在exports上的属性转成可被import { formatDate }识别的结构，此时代码可以正常运行
• 一旦文件中引入了第三方依赖，打包器的静态分析流程会触发严格的 ESM 模块结构校验规则，不再走 CJS 兼容兜底逻辑，直接因为找不到符合 ESM 规范的formatDate导出，抛出导入错误
• 直接在 React 组件中编写第三方库调用逻辑不会报错，是因为组件文件本身是标准的 ESM 模块结构，不存在导出规范不匹配的问题，自然不会触发校验报错

修复方法 #

把 utils 文件内的 CommonJS 导出写法替换为标准的 ESM 命名导出即可，修改后的代码如下：

import moment from 'moment';

export const formatDate = (format, date) => {
  return moment(date).format(format);
}

修改完成后，其他模块通过import { formatDate } from 'src/utils'的方式即可正常识别导出，不会再触发编译报错。

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