使用npm引入FullCalendar 3.10.0报momentProperties.push错误求助

这个问题我之前也碰到过，核心原因是FullCalendar 3.x的npm包依赖全局挂载的jQuery和moment，而ES模块默认不会把导入的变量暴露到window对象上，导致FullCalendar加载时找不到正确的依赖实例，从而抛出这个奇怪的错误。下面是具体的解决步骤：

1. 手动将jQuery和moment挂载到全局 #

在你的组件文件或者项目入口文件中，先导入jQuery和moment，然后把它们挂载到window上，再导入FullCalendar：

import $ from 'jquery';
import moment from 'moment';

// 挂载到全局，让FullCalendar能访问到全局的jQuery和moment
window.$ = $;
window.jQuery = $;
window.moment = moment;

// 必须在挂载后再导入FullCalendar
import 'fullcalendar';

class CalendarEl extends React.PureComponent {
  componentDidMount() {
    $(`#calendar-1`).fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay,listWeek',
      },
      themeSystem: 'bootstrap4',
      // ...其他配置项
    })
  }
  // ...render方法
}
export default CalendarEl;

这样做的目的是让FullCalendar在加载时能找到它预期的全局moment和jQuery对象，和CDN加载时的环境保持一致。

2. 用webpack ProvidePlugin全局注入依赖（推荐） #

如果不想手动挂载到window，可以通过webpack的ProvidePlugin自动在所有模块中注入jQuery和moment，相当于全局可用：
在你的webpack.config.js中添加以下配置：

const webpack = require('webpack');

module.exports = {
  // ...其他webpack配置
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      moment: 'moment'
    })
  ]
};

配置后，webpack会在每个模块中自动引入这三个变量，FullCalendar就能正确识别到依赖，不需要手动挂载到window了。

3. 确保导入顺序正确 #

无论用哪种方法，必须保证先导入jQuery和moment，再导入FullCalendar。如果FullCalendar先被导入，它会立即检查全局依赖，此时还没挂载的话就会报错。

4. 排查moment版本冲突 #

有时候项目中其他依赖可能会安装不同版本的moment，导致版本不一致引发错误。可以通过以下命令查看项目的moment依赖树：

npm list moment

如果发现有多个版本的moment，需要强制统一到2.24.0：

• 如果你用npm，先安装npm-force-resolutions工具：

  npm install -D npm-force-resolutions
  

  然后在package.json中添加：

  "resolutions": {
    "moment": "2.24.0"
  },
  "scripts": {
    "preinstall": "npm-force-resolutions"
  }
  

  最后重新安装依赖：

  npm install
  

• 如果你用yarn，直接在package.json中添加resolutions字段后执行yarn install即可。

按照上面的步骤操作后，应该就能解决moment.momentProperties.push is not a function的错误，用npm模块正常初始化FullCalendar了。

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