vue.js - Gridsome Full Calendar ビルド エラー - SSR なし

Question

次のように、Gridsome プロジェクトでフル カレンダー vue コンポーネント ( https://github.com/fullcalendar/fullcalendar-vue ) を使用しようとしています。

<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....
      }
    },
  })

Mounted() ライフサイクル フックでこれらのプラグインが必要です。

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

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

次に、FullCalendar コンポーネントを次のようにラップしました。

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

Mounted() フックで必要な追加の依存関係は問題なく含まれています。

ただし、次のエラーが表示されます。

TypeError: Cannot read property '__esModule' of undefined

components() が「@fullcalendar/vue」コンポーネントのインポートに失敗しているようです。

「@fullcalendar/vue」コンポーネントをインポートするときに何か間違ったことをしていますか?

「@fullcalendar/vue」コンポーネントとプラグインの依存関係の両方を SSR なしで含める別の方法はありますか?