fullcalendar - 直接进入页面时，Fullcalendar 无法读取未定义的属性破坏

Question

我正在使用 Nuxt 2.14.3 并且我想使用fullcalendar 库。为此，我通过 Yarn 添加了以下软件包：

yarn add @fullcalendar/vue
yarn add @fullcalendar/interaction
yarn add @fullcalendar/daygrid
yarn add @fullcalendar/timegrid
yarn add @fullcalendar/list

我的 Vue 模板文件如下所示：

<template>
  <client-only placeholder="loading...">
    <FullCalendar class="demo-app-calendar" :options="calendarOptions">
      <template #eventContent="arg">
        <b>{{ arg.timeText }}</b>
        <i>{{ arg.event.title }}</i>
      </template>
    </FullCalendar>
  </client-only>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'

export default {
  components: {
    FullCalendar,
  },
  mixins: [
    page({
      meta() {
        return {
          title: this.$tU('meta_title_vrm_planning'),
        }
      },
    }),
  ],
  data() {
    return {
      calendarOptions: {
        plugins: [
          dayGridPlugin,
          timeGridPlugin,
          interactionPlugin, // needed for dateClick
        ],
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay',
        },
        initialView: 'dayGridMonth',
        initialEvents: [
          {
            id: 1,
            title: 'All-day event',
            start: new Date().toISOString().replace(/T.*$/, ''),
          },
          {
            id: 2,
            title: 'Timed event',
            start: `${new Date().toISOString().replace(/T.*$/, '')}T12:00:00`,
          },
        ], // alternatively, use the `events` setting to fetch from a feed
        editable: true,
        selectable: true,
        selectMirror: true,
        dayMaxEvents: true,
        weekends: true,
        select: this.handleDateSelect,
        eventClick: this.handleEventClick,
        eventsSet: this.handleEvents,
        /* you can update a remote database when these fire:
                    eventAdd:
                    eventChange:
                    eventRemove:
                    */
      },
      currentEvents: [],
    }
  },
  methods: {
    handleDateSelect(selectInfo) {
      const title = prompt('Please enter a new title for your event')
      const calendarApi = selectInfo.view.calendar

      calendarApi.unselect() // clear date selection

      if (title) {
        calendarApi.addEvent({
          id: 3,
          title,
          start: selectInfo.startStr,
          end: selectInfo.endStr,
          allDay: selectInfo.allDay,
        })
      }
    },

    handleEventClick(clickInfo) {
      if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
        clickInfo.event.remove()
      }
    },

    handleEvents(events) {
      this.currentEvents = events
    },
  },
}
</script>

它给了我以下错误：

[Vue warn]: Error in mounted hook: "TypeError: DateProfileGeneratorClass is not a constructor"

found in

---> <FullCalendar>

和

TypeError: DateProfileGeneratorClass is not a constructor
    at buildDateProfileGenerator (main.js?d610:7232)

并且

TypeError: Cannot read property 'destroy' of undefined
    at VueComponent.beforeDestroy (FullCalendar.js?ff68:33)

注意：这在从另一个页面访问我的页面时非常有效，但是当直接转到页面 URL 时（或单击 CTRL+F5 时）我收到上述错误。

注意 2：我尝试按照示例 repo https://github.com/fullcalendar/fullcalendar-example-projects/tree/master/nuxt中的建议在 Nuxt 配置中编译库，但它给了我完全相同的错误，但有.ts 文件而不是 .js 文件。

标签： fullcalendarnuxt.js