fullcalendar - 如何将 FullCalendar 与 Nuxt3 一起使用？获取 __vite_ssr_import_1__ 未定义

Question

尝试设置FullCalendar (Vue)使用 NuxtJS 版本 3。

此 SFC 会导致 nuxi dev 出现错误 [worker] __vite_ssr_import_1__ 未定义。

我尝试了 https://github.com/fullcalendar/fullcalendar-vue/issues/5 的变体和 https://github.com/fullcalendar/fullcalendar-vue/issues/152

我尝试在 nuxt 配置中对 @fullcalendar/common 使用解析 dedup，并将其移植到 nuxt:https://github.com/fullcalendar/fullcalendar-example-projects/tree/master/vue3-typescript

<template>
  <FullCalendar :options="calendarOptions" />
</template>
<script setup>
import "@fullcalendar/core/vdom"; // solves problem with Vite
import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
const handleDateClick = (arg) => {
  alert("date click! " + arg.dateStr);
};
const calendarOptions = {
  plugins: [dayGridPlugin, interactionPlugin],
  initialView: "dayGridMonth",
  dateClick: handleDateClick,
  events: [
    { title: "event 1", date: "2019-04-01" },
    { title: "event 2", date: "2019-04-02" },
  ],
};
</script>

当前的package.json是:

{
  "private": true,
  "scripts": {
    "dev": "nuxi dev",
    "build": "nuxi build",
    "start": "node .output/server/index.mjs"
  },
  "devDependencies": {
    "@nuxtjs/tailwindcss": "^5.0.0",
    "autoprefixer": "^10.4.2",
    "nuxt3": "^3.0.0-27451165.114cbe3",
    "postcss": "^8.4.8"
  },
  "dependencies": {
    "@fullcalendar/common": "^5.10.1",
    "@fullcalendar/core": "^5.10.1",
    "@fullcalendar/daygrid": "^5.10.1",
    "@fullcalendar/interaction": "^5.10.1",
    "@fullcalendar/vue3": "^5.10.1",
    "@headlessui/vue": "^0.0.0-insiders.79b3015",
    "@heroicons/vue": "^1.0.6",
    "@tailwindcss/aspect-ratio": "^0.4.0",
    "@tailwindcss/typography": "^0.5.2",
    "@vuepic/vue-datepicker": "^3.0.0",
    "lodash": "^4.17.21",
    "vue3-carousel": "^0.1.38"
  }
}

而nuxt.config.js是:

import { defineNuxtConfig } from "nuxt3";

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
 
  buildModules: [
    "@nuxtjs/tailwindcss",
 
  ],
  build: {
    transpile: ['@headlessui/vue']
  },
 
  vite: {
    logLevel: "info",
    optimizeDeps: {
      include: [
        "@headlessui/vue",
        "@heroicons/vue/solid",
        "@heroicons/vue/outline",
        
      ],
    },
   
  },
});

Answer 1

FullCalendar 似乎不适用于 SSR 上下文。
为了仅在客户端加载 FullCalendar，我创建了一个名为 plugins/full-calendar.client.js 的文件。
.client 后缀让插件仅在客户端加载。

import '@fullcalendar/core/vdom' // solve problem with Vite
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";

FullCalendar.options = {
    plugins: [dayGridPlugin, interactionPlugin]
}

export default defineNuxtPlugin((/* nuxtApp */) => {
    return {
        provide: {
            fullCalendar: () => FullCalendar
        }
    }
})

然后我将插件导入到组件中:

<template>
  <FullCalendar :options="calendarOptions" />
</template>

<script setup>
const { $fullCalendar } = useNuxtApp()
const FullCalendar = $fullCalendar()

const calendarOptions = {
  ...FullCalendar.options,
  initialView: 'dayGridMonth',
  events: [
    { title: "event 1", date: "2022-06-26" },
    { title: "event 2", date: "2022-06-27" },
  ],
}
</script>

我的package.json:

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  },
  "devDependencies": {
    "nuxt": "3.0.0-rc.4"
  },
  "dependencies": {
    "@fullcalendar/core": "^5.11.0",
    "@fullcalendar/daygrid": "^5.11.0",
    "@fullcalendar/interaction": "^5.11.0",
    "@fullcalendar/timegrid": "^5.11.0",
    "@fullcalendar/vue3": "^5.11.1"
  }
}