无法使用反应服务器呈现呈现fullcalendar

Question

我正在使用fullcalendar与reactjs服务器渲染（NextJS）。我有一个问题。如果我直接访问日历页面（https://www.vansday.net/schedule），它会在下面注意到附加错误消息的错误。如果我访问任何其他组件，然后路由到此日历组件，它将没关系。不知道为什么。

本地调试错误消息：

$.extend is not a function
TypeError: $.extend is not a function
    at Object.defineProperty.value (E:\project\vansday\node_modules\fullcalendar\dist\fullcalendar.js:1261:24)
    at __webpack_require__ (E:\project\vansday\node_modules\fullcalendar\dist\fullcalendar.js:35:30)
    at Object.defineProperty.value (E:\project\vansday\node_modules\fullcalendar\dist\fullcalendar.js:4554:20)
    at __webpack_require__ (E:\project\vansday\node_modules\fullcalendar\dist\fullcalendar.js:35:30)
    at Object.defineProperty.value (E:\project\vansday\node_modules\fullcalendar\dist\fullcalendar.js:1759:25)
    at __webpack_require__ (E:\project\vansday\node_modules\fullcalendar\dist\fullcalendar.js:35:30)
    at Object.defineProperty.value (E:\project\vansday\node_modules\fullcalendar\dist\fullcalendar.js:12374:19)
    at __webpack_require__ (E:\project\vansday\node_modules\fullcalendar\dist\fullcalendar.js:35:30)
    at module.exports (E:\project\vansday\node_modules\fullcalendar\dist\fullcalendar.js:78:18)
    at E:\project\vansday\node_modules\fullcalendar\dist\fullcalendar.js:81:10
    at webpackUniversalModuleDefinition (E:\project\vansday\node_modules\fullcalendar\dist\fullcalendar.js:8:20)
    at Object.<anonymous> (E:\project\vansday\node_modules\fullcalendar\dist\fullcalendar.js:15:3)
    at Module._compile (module.js:660:30)
    at Module._compile (E:\project\vansday\node_modules\source-map-support\source-map-support.js:492:25)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
    at Module.require (module.js:604:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (E:\project\vansday\components\calendars\Calendar.js:10:1)
    at Module._compile (module.js:660:30)

添加源代码：

import React from 'react';
import PropTypes from "prop-types";
import Link from 'next/link';
import { connect } from "react-redux";
import Router from 'next/router';

import $ from 'jquery';

import moment from 'moment';
import 'fullcalendar/dist/fullcalendar.js';

componentDidMount(){
    const { calendar,calendarModal } = this.refs;

    $(calendar).fullCalendar({
        header:{
            right:  'today,listWeek,agendaWeek,month,prev,next'
        },
        timezone:'local',
        eventSources:[
        ],

        dayClick: function(date, jsEvent, view) {
          if(this.props.isAuthenticated) this.setState({ today:date,openEventModal: true })
        }.bind(this),
        eventClick: function(thevent, jsEvent, view ){
          this.setState({openViewModal: true,thevent: thevent})

        }.bind(this),

      });
      if(!this.props.isAuthenticated){
        $(calendar).fullCalendar( 'addEventSource', {
          events: function(start, end, timezone, callback) {
            api.events.loadpub({start:start, end:end}).then(events => callback(parseEvents(start, end, events)))

          }.bind(this),
        });
      }


      }
      this.setState({events:$(calendar).fullCalendar('clientEvents')});
  }

Answer 1

我发现您无法解决此问题，因为我仍然看到您提供的链接上的500错误。

您可能希望升级到FullCalendar V4，因为它不依赖于jQuery，因此可以轻松地与React集成。它还有一个最近发布的official FullCalendar React component。

然后，对于FullCalendar React组件文档，您可以参考here。

为了将FullCalendar与Next.js集成，我写了一篇关于how to use FullCalendar in Next.js的文章。您可能想要了解它。

我希望这有帮助。