无法使用反应服务器渲染来渲染完整日历答案

【问题标题】：failed to render fullcalendar with react server rendering无法使用反应服务器渲染来渲染完整日历
【发布时间】：2018-04-24 05:08:02
【问题描述】：

我正在使用带有 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')});
  }

【问题讨论】：

已经实现了完整的日历是jQuery插件？尝试npmjs.com/package/fullcalendar-reactwrapper 进行反应。
您链接到的页面返回 500 内部服务器错误，这表示服务器端问题，更不用说 JavaScript 问题了。据我所知，您在问题中显示的错误消息并未出现。很难看出这两件事是如何联系起来的，如果没有一些示例代码和其他相关信息，很难解决这个问题。不过，Tolsee 的建议是明智的——你在你的页面中包含了 jQuery 吗？
我发布的链接在Nginx后面，所以只显示500错误，这就是我发布我从本地环境得到的错误消息的原因。

标签： reactjs fullcalendar nextjs

【解决方案1】：

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

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

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

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

我希望这会有所帮助。

【讨论】：