Ошибка построения полного календаря Gridsome - нет SSR

Я пытаюсь использовать компонент Full Calendar vue (https://github.com/fullcalendar/fullcalendar-vue) в проекте Gridsome следующим образом:

<template>
  <div class="tabStaffManage">
    <div>
          <FullCalendar
            ref="staffCalendar"
            class="fullCalendar"
            defaultView="dayGridMonth"
            :events="calendarEvents"
            :plugins="calendarPlugins"
            :allDaySlot="false"
            :header="{
              center: 'dayGridMonth, timeGridDay',
              right: 'prev, next'
            }"
            minTime="09:00:00"
            :selectable="true"
            maxTime="18:30:00"
            @eventClick="onEventClick"
            @select="onDateSelect"
            :showNonCurrentDates="false"
          ></FullCalendar>
    </div>
  </div>
</template>


<script>
import { formatDate } from "@fullcalendar/core"
import FullCalendar from "@fullcalendar/vue"
import timeGridPlugin from "@fullcalendar/timegrid"
import dayGridPlugin from "@fullcalendar/daygrid"
import interactionPlugin from "@fullcalendar/interaction"

export default {
  components: {
    FullCalendar,
  },
  data() {
    return {
      calendarPlugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
    }
  },
}
</script>

Однако при сборке возникает ошибка:

Could not generate HTML for "/staff/dashboard/":
ReferenceError: Element is not defined
    at Object.338 (node_modules/@fullcalendar/core/main.esm.js:102:0)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at Module.552 (assets/js/page--src-pages-staff-dashboard-vue.ea5234e7.js:598:16)
    at __webpack_require__ (webpack/bootstrap:25:0)

Я понимаю, что Full Calendar не поддерживает SSR. Согласно документации Gridsome (https://gridsome.org/docs/assets-scripts/#without-ssr-support) Я сделал это, чтобы импортировать компонент:

Я создал псевдоним для его зависимостей в gridsome.config.js примерно так:

var path = require('path');
api.configureWebpack({
    resolve: {
      alias: {
        "timeGridPlugin": path.resolve('node_modules', '@fullcalendar/timegrid'),
        etc....
      }
    },
  })

и потребовали эти плагины в хуке жизненного цикла mount ():

mounted() {
  if (!process.isClient) return
  let timeGridPlugin = require('timeGridPlugin')

  ...
},
components: {
  FullCalendar: () =>
    import ('@fullcalendar/vue')
    .then(m => m.FullCalendar)
    .catch(),
}

Затем я обернул компонент FullCalendar в:

<ClientOnly>
  <FullCalendar></FullCalendar>
</ClientOnly>

Дополнительные зависимости, необходимые в хуке mount (), не включаются.

Однако теперь я получаю следующую ошибку:

TypeError: Cannot read property '__esModule' of undefined

Похоже, что components () не удается импортировать компонент @ fullcalendar / vue.

Я что-то не так делаю при импорте компонента '@ fullcalendar / vue'?

Есть ли другой способ включить как компонент '@ fullcalendar / vue', так и зависимости плагина без SSR?


vue.js server-side-rendering fullcalendar gridsome
person Palmer    schedule 11.06.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Требование полного календарного компонента vue в main.js путем проверки клиентского API gridsome и глобальной регистрации компонента в vue, похоже, работает и делает то, что я ожидал:

  // Include no SSR
  if (process.isClient) {
    const FullCalendar = require("@fullcalendar/vue").default
    Vue.component("full-calendar", FullCalendar)
  }

Я также не указывал на объект default, когда требовал других модулей в компоненте:

mounted() {
  if (!process.isClient) return
  let timeGridPlugin = require('timeGridPlugin').default

  ...
}
person Palmer    schedule 11.06.2020