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

Question

我正在使用 NextJS 和 Fullcalendar。
我尝试使用 fullcalendar使用动态导入，如 this example (有关更多信息，此示例解决方案来自 here )。
它工作，但有一个问题。几乎每 5 次刷新尝试中就有 1 次以错误结束 Please import the top-level fullcalendar lib before attempting to import a plugin ( like this ，但在我的情况下版本是正确的)
之后，我发现 next/dynamic 的 modules 选项已被弃用。我认为这是我的问题的根源(我不确定 100%，但至少它已被弃用并且需要更新)。
如docs说，处理动态导入的新方法是这样的:

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

但是因为我们需要多个导入，我发现 this solution .
现在，似乎一切都应该正常工作，但我的代码没有效果。

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 中有一些东西.将这个文件编辑成 transpile 模块是另一个神秘的冒险，充满了问题。
我应该怎么做？

Answer 1

我知道 OP 正在寻求帮助以使其与动态导入一起使用，但如果有人遇到这个问题，试图让 FullCalendar 通常与 next.js 一起工作(有或没有动态导入)，我希望这个答案会有所帮助。我的回答是修改@juliomalves' answer .
(1) 像@juliomalves 和官方例子一样，我安装了next-transpile-modules ，并包含适当的依赖项

// next.config.js

const withTM = require('next-transpile-modules')([
  "@fullcalendar/common",
  "@fullcalendar/daygrid",
  "@fullcalendar/timegrid",
  "@fullcalendar/interaction",
  "@fullcalendar/react",
]);

module.exports = withTM({
  // any other next.js settings here
});

(2) 我没有修改 babel，而是保持原样。没有添加 babel.config.js 或 babel-plugin-transform-require-ignore 插件。
(3)我按照官方例子一样的方式添加了合适的CSS。

// _app.tsx

import '@fullcalendar/common/main.css'
import '@fullcalendar/daygrid/main.css'
import '@fullcalendar/timegrid/main.css'

(4) 我在自定义组件中导入了 FullCalendar 依赖项。

// components/FullCalendar.tsx

import Calendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import styles from './Fullcalendar.module.scss';

export default function FullCalendar(props) {
    return (
       <Calendar {...props} plugins={[dayGridPlugin]} initialView="dayGridMonth" />
    );
}

(5) 然后我不是动态导入，而是定期导入到需要日历的页面中。