fullcalendar-NextJS-动态导入不显示日历

我正在使用 NextJS 和 Fullcalendar。

我尝试fullcalendar在这个例子中使用动态导入（有关更多信息，这个示例解决方案来自这里）。

它奏效了，但有一个问题。几乎每 5 次刷新尝试中就有 1 次以错误告终Please import the top-level fullcalendar lib before attempting to import a plugin（就像这样，但在我的情况下版本是正确的）

之后，我发现 next/dynamic 的模块选项已被弃用。我认为这是我的问题的根源（我不确定 100%，但至少它已被弃用并需要更新）。

正如文档所说，处理动态导入的新方法是这样的：

const DynamicComponent = dynamic(() =>
  import('../components/hello').then((mod) => mod.Hello)
)

但是因为我们需要多次导入，所以我找到了这个解决方案。

目前，似乎一切正常，但我的代码无效。

import dynamic from "next/dynamic";
import { useEffect, useState } from "react";

import "@fullcalendar/common/main.css"; // @fullcalendar/react imports @fullcalendar/common
import "@fullcalendar/daygrid/main.css"; // @fullcalendar/timegrid imports @fullcalendar/daygrid
import "@fullcalendar/timegrid/main.css"; // @fullcalendar/timegrid is a direct import
import "./Fullcalendar.module.scss";
let CalendarComponent;

const Calendar = dynamic(() =>
  import("@fullcalendar/react").then((module) => module.Calendar)
);
const dayGridPlugin = dynamic(() =>
  import("@fullcalendar/daygrid").then((module) => module.dayGridPlugin)
);

export default function FullCalendar(props) {
  const [calendarLoaded, setCalendarLoaded] = useState(false);

  useEffect(() => {
    CalendarComponent = () => (
      <Calendar
        {...props}
        plugins={[dayGridPlugin]}
        initialView="dayGridMonth"
      />
    );
    setCalendarLoaded(true);
  }, []);

  let showCalendar = (props) => {
    if (!calendarLoaded) return <div>Loading ...</div>;
    return <CalendarComponent {...props} />;
  };

  return <div>{showCalendar(props)}</div>;
}

我还找到了另一种使用next transpile modules 的方法。但他们这么说"there is currently no way to transpile only parts of a package, it's all or nothing"。

事实上，我在next.config.js. 将此文件编辑为转译模块是另一个充满问题的神秘冒险。

我该怎么办？