【 エンジニアハック】Next.jsにFullcalendarを導入する(罠あり)

■前提

React用の公式ドキュメント（https://fullcalendar.io/docs/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

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;

npm install next-transpile-modules@^4.1.0

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

module.exports = {
  presets: ["next/babel"],
  overrides: [
    {
      include: ["./node_modules"],
      plugins: [
        [
          "babel-plugin-transform-require-ignore",
          {
            extensions: [".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() }]} />
);