使用moment-duration-format触发TypeError错误，请求技术协助

错误原因 #

你遇到的两个错误本质是同一个问题：moment-duration-format插件未能成功挂载到moment实例上。具体表现为：

• Cannot read properties of undefined (reading 'fn')：插件试图访问moment.fn但moment对象未被正确识别，通常是版本不兼容或导入方式错误导致。
• moment.duration(...).format is not a function：duration对象缺少format方法，说明插件未成功注册。

解决方案 #

1. 升级依赖版本 #

你的moment版本（2.18.1）过于陈旧，与moment-duration-format 1.3.0存在兼容性冲突。执行以下命令升级到最新兼容版本：

npm install moment@latest moment-duration-format@latest

升级完成后重启项目，再测试你的代码。

2. 手动挂载插件（适用于不想升级版本的场景） #

如果升级后问题仍存在，可手动将插件挂载到moment实例上：

import moment from 'moment';
import durationFormat from 'moment-duration-format';

// 手动注册插件
durationFormat(moment);

// 正常使用格式化方法
{moment.duration(456, 'seconds').format("h:mm", {
    trim: false,
})}

3. 调整打包工具配置（针对Vite/Webpack等） #

如果使用现代化打包工具，可能存在树摇或模块解析问题，导致插件无法正确找到moment实例。以Vite为例，在vite.config.js中添加优化配置：

export default {
  optimizeDeps: {
    include: ['moment', 'moment-duration-format']
  }
}

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