fullcalendar - NextJS - 動態導入不顯示日歷

Question

我正在使用 NextJS 和 Fullcalendar。

我嘗試使用fullcalendar使用此示例中的動態導入（有關更多信息，此示例解決方案來自此處）。

它工作，但有一個問題。 幾乎每 5 次刷新嘗試中有 1 次以錯誤結束Please import the top-level fullcalendar lib before attempting to import a plugin （ 像這樣，但在我的情況下版本是正確的）

之后，我發現 next/dynamic 的 modules 選項已被棄用。 我認為這是我的問題的根源（我不確定 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>;
}

我還找到了另一種使用下一個轉譯模塊的方法。 但是他們說"there is currently no way to transpile only parts of a package, it's all or nothing" 。

事實上，我在next.config.js中有一些東西。 將這個文件編輯成 transpile 模塊是另一個神秘的冒險，充滿了問題。

我應該怎么做？

Answer 1

使 FullCalendar 與 Next.js 正常工作需要一些初始設置並對初始代碼進行一些更改。

首先，讓我們安裝next-transpile-modules來處理fullcalendar的 ES 模塊。 確保包含您使用的所有@fullcalendar依賴項。

// next.config.js

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

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

接下來，添加自定義 Babel 配置以忽略 fullcalendar 中使用的fullcalendar導入 - 需要安裝babel-plugin-transform-require-ignore插件。 這可以防止Global CSS cannot be imported from within node_modules錯誤來自 Next.js。

// babel.config.js

module.exports = {
    presets: [
        '@babel/preset-react'
    ],
    overrides: [
        {
            include: ['./node_modules'],
            plugins: [
                [
                    'babel-plugin-transform-require-ignore',
                    {
                        extensions: ['.css']
                    }
                 ]
            ]
        }
    ]
};

您必須在 _app.js 中包含fullcalendar的全局_app.js以彌補這一點。 全局 CSS 只能從 Next.js 中的該文件導入。

// _app.js

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

最后，您可以簡化和重構您的FullCalendar組件。 這里不用動態導入它的fullcalendar依賴，我們會在使用的時候動態導入組件本身。

// components/FullCalendar.jsx

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" />
    );
}

然后，在任何使用它的地方動態導入您的自定義組件。

import dynamic from 'next/dynamic';

const FullCalendar = dynamic(() => import('../components/FullCalendar'), {
    ssr: false
});

const SomePage = () => {
    return <FullCalendar />;
}

export default SomePage;

作為參考，這是基於fullcalendar的官方示例，並進行了一些修改以使其與next-transiple-modules v6.4.0 一起使用。

Answer 2

---

我們解決這個問題

---

第1步：首先按照上面的“juliomalves”回答next.config.js。 並且還在“_app.js”文件中導入 CSS 文件，也請遵循上述答案。

---

第 2 步：編寫所有完整的日歷代碼，就像我們在 react js 中編寫的一樣，但將其作為一個單獨的組件。

---

第 3 步：接下來使用 NextJS 動態導入導入“日歷”組件。

---

import dynamic from 'next/dynamic';

const Calendar = dynamic(()=> import('../path/to/component/Calendar'),{ssr:false})

---

它現在應該可以工作了！

---