Gridsome Full Calendar build error - no SSR

Question

I'm trying to use the Full Calendar vue component (https://github.com/fullcalendar/fullcalendar-vue) in a Gridsome project like so:

<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>

This, however, produces an error on build:

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)

I understand that Full Calendar does not support SSR. So as per the Gridsome documentation (https://gridsome.org/docs/assets-scripts/#without-ssr-support) I did this to import the component:

I created an alias for it's dependencies in gridsome.config.js like so:

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

and required those plugins in the mounted() lifecycle hook:

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

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

I then wrapped the FullCalendar component in:

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

The extra dependencies required in the mounted() hook are included no problem.

However I now get the following error:

TypeError: Cannot read property '__esModule' of undefined

It seems that components() is failing to import the '@fullcalendar/vue' component.

Am I doing something wrong when importing the '@fullcalendar/vue' component?

Is there another way to include both the '@fullcalendar/vue' component and the plugin dependencies with no SSR?

score 1 · Answer 1 · answered Jun 11 '20 at 19:34

Requiring the full calendar vue component in main.js by checking the gridsome client API and registering the component globally in vue seems to work and does what I expected:

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

I also was not pointing to the default object when requiring the other modules in the component:

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

  ...
}

Gridsome Full Calendar build error - no SSR

1 Answers1