Next.jsにFullcalendarを導入する際のハマりポイントと対処法

前提

React用の公式ドキュメント通りに構築しようとすると、

Global CSS cannot be imported from within node_modules.

というエラーが生じて、ハマってしまう。

エラーの理由はNext.jsでは、node_modules内のファイルからcssをimportすることは禁止されているにもかかわらず、下図のようにimportされてしまっているため。

参考：https://github.com/vercel/next.js/blob/master/errors/css-npm.md

node_modules > @fullcalendar > common > main.js

import './main.css'; 
import { __assign, __spreadArrays, __extends } from 'tslib'; 
import { createContext, Component, createRef, createElement, Fragment } from './vdom.js'; 

export * from './vdom.js'; ・・・

手順

上記前提を踏まえた上で、下記手順で実装していく

・プロジェクトの作成

npx create next-app --text-app

・フルカレンダーのライブラリをインストール

npm install @fullcalendar/react @fullcalendar/daygrid

・カレンダー用のコンポーネントを作成（Calendar.jsx）

import FullCalendar from "@fullcalendar/react"; 
import dayGridPlugin from "@fullcalendar/daygrid"; 

const Calendar = () => ( 
<FullCalendar plugins={[dayGridPlugin]} initialEvents={[{ title: "initial event", start: new Date() }]} />
 ); 

export default Calendar;

・ESMで書かれているFullCalendarをトランスパイルできるようにする

npm install next-transpile-modules@^4.1.0

・next.config.jsを作成する（中身は以下）

const withTM = require("next-transpile-modules")(["@fullcalendar"]); 
module.exports = withTM({});

babel-plugin-transform-require-ignoreをインストール

https://www.npmjs.com/package/babel-plugin-transform-require-ignore

babel.config.jsを作成する（中身は以下）

ざっくりとした内容としては、

.node_modules" 内のファイルから .css をインポートしている部分を削除する

ための記述です

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

・カレンダー用のコンポーネントを作成（Calendar.jsx）にcssを読み込ませる

import FullCalendar from "@fullcalendar/react"; 
import dayGridPlugin from "@fullcalendar/daygrid"; 
import '@fullcalendar/common/main.css' 
import '@fullcalendar/daygrid/main.css' 

const Calendar = () => ( 
  <FullCalendar plugins={[dayGridPlugin]} initialEvents={[{ title: "initial event", start: new Date() }]} />
);

・ビルド

npm run dev

・うまく表示されます

まとめ

いかがでしたでしょうか。本記事ではNext.jsにFullcalendarを導入する際のハマりポイントと対処法について紹介しています。ぜひ参考にしてみてください。