本文解析 react 18 应用中因函数作用域和模块导出不当导致“formatdatelong is not defined”错误的根本原因，并提供两种符合现代 typescript/esm 规范的可靠修复方案。
在 React 18 项目中使用 Moment.js 进行日期格式化时，若将辅助函数封装在闭包内却未正确暴露，就会触发 ReferenceError: formatDateLong is not defined —— 这并非 React 或 Moment 的问题，而是 JavaScript 模块作用域与导出机制的理解偏差所致。
回顾原始代码：
// src/utils/datetime-formatter.ts
import moment from "moment";
function dataTimeFormatter() {
const formatDateLong = (value) => moment(value).format("MMMM DD, YYYY");
const formatDateShort = (value) => moment(value).format("MMM DD, YYYY");
const yearsAgo = (value) => moment(value, "YYYYMMDD").fromNow(true);
} // ❌ 函数执行后立即销毁所有内部变量，无任何返回或导出此处 dataTimeFormatter 是一个无返回值、不导出任何内容的普通函数。其内部声明的 formatDateLong 等变量仅在函数执行期间存在，属于局部作用域，无法被外部模块访问。因此，当你在组件中 import dataTimeFormatter from "..."; 后直接使用 formatDateLong(...)，TypeScript 和运行时均无法识别该标识符——它根本不存在于模块的导出命名空间中。
✅ 正确解法一：命名导出（推荐）
采用 ES 模块标准的 export const 方式，清晰、可树摇（tree-shakable）、支持按需导入：
// src/utils/datetime-formatter.ts
import moment from "moment";
export const formatDateLong = (value: string | number | Date): string => {
return moment(value).format("MMMM DD, YYYY");
};
export const formatDateShort = (value: string | number | Date): string => {
return moment(value).format("MMM DD, YYYY");
};
export const yearsAgo = (value: string): string => {
return moment(value, "YYYYMMDD").fromNow(true);
};组件中按需导入并使用：
// Actordetails.tsx
import { formatDateLong } from "../../utils/datetime-formatter";
function ActorDetails({ actor }: { actor: Actor }) {
return (
<div className="row">
{actor.birthday && actor.place_of_birth ? (
<p className="birth-info small">
Born in <strong>{actor.place_of_birth}</strong>, on{" "}
<strong>{formatDateLong(actor.birthday)}</strong>
</p>
) : null}
</div>
);
}✅ 正确解法二：默认导出对象
若偏好统一命名空间管理，可导出一个工具对象（注意命名一致性：dateTimeFormatter 而非 dataTimeFormatter）：
// src/utils/datetime-formatter.ts
import moment from "moment";
const dateTimeFormatter = {
formatDateLong: (value: string | number | Date): string =>
moment(value).format("MMMM DD, YYYY"),
formatDateShort: (value: string | number | Date): string =>
moment(value).format("MMM DD, YYYY"),
yearsAgo: (value: string): string =>
moment(value, "YYYYMMDD").fromNow(true),
} as const;
export default dateTimeFormatter;使用时需通过对象属性访问：
import dateTimeFormatter from "../../utils/datetime-formatter";
// ...
<strong>{dateTimeFormatter.formatDateLong(actor.birthday)}</strong>⚠️ 注意事项与最佳实践
- 避免 Moment.js 的全局污染风险：Moment 已进入维护模式，建议新项目考虑 date-fns 或 dayjs（轻量、不可变、API 类似 Moment）。
- 类型安全增强：为参数添加 string | number | Date 联合类型，兼容 TMDB API 常见的 ISO 字符串（如 "1990-05-12"）及时间戳。
- 空值防护（进阶）：生产环境建议增加 if (!value) return "" 判断，防止 moment(undefined) 返回无效日期。
- 不要忽略 ESLint 警告：'formatDateLong' is assigned a value but never used 是关键线索——它明确指出该变量未被导出或引用，应立即检查模块导出逻辑。
总之，核心原则是：模块导出的内容必须显式声明（export）或作为默认值返回（export default），绝不能依赖闭包内未暴露的局部变量。 遵循此规范，即可彻底解决此类“函数未定义”问题。
