fullcalendar - NextJS - Dynamic import doesn't show calendar

Question

I'm using NextJS and Fullcalendar.

I tried to use fullcalendar using dynamic import like in this example(for more info, this example solution comes from here).

It worked, But there was a problem. Almost every 1 out of 5 refreshing attempts ended in error Please import the top-level fullcalendar lib before attempting to import a plugin (like this, but versions are correct in my case)

After that, I found out that the modules option for next/dynamic has been deprecated. I thought it was a source of my problem (I'm not sure 100%, but at least it was deprecated and needed to be updated).

As docs says, newer way to handle dynamic imports is like this:

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

But because we need multiple imports I found this solution.

For now, It seems like everything should be working, but my code has no effect.

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>;
}

I also find another way to use next transpile modules. But they say that "there is currently no way to transpile only parts of a package, it's all or nothing".

In fact, I have something in next.config.js. Editing this file into transpile modules is another mysterious adventure, full of problems.

What should I have to do?

Carnegie

Answer 1

I know the OP was asking for help making it work with a dynamic import, but in case anyone comes across this question trying to get FullCalendar to work with next.js in general (with or without dynamic importing) I hope this answer will help. My answer is a modification of @juliomalves' answer.

(1) Like @juliomalves and the official example, I installed next-transpile-modules, and included the appropriate dependencies

// 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) Instead of modifying babel, I left it as is. Did not add a babel.config.js, or the babel-plugin-transform-require-ignore plugin.

(3) I added the appropriate CSS in the same way as the official example.

// _app.tsx

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

(4) I imported the FullCalendar dependencies in my custom component.

// 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) And then instead of importing dynamically, I imported regularly into the page where I needed the calendar.

Feaze

It seems that the solution provided doesn't work for Typescript and Next.js, but this solution worked for me. Thanks so much!!! They really need to update the site to have a Next and TS example. If feel like it's getting pretty common and I don't know of a good reason not to use TS. – Sulphide

This worked for me in NextJS 11.1.2. Watch out for the component name. I kept trying 'FullCalendar' when the component to use is called 'Calendar'. – Penza

I use Fullcalendar v6 and Next js 12. If I run my app in dev mode, this solution works. But it doesnt work in build mode. Does anyone have a solution for this versions? – Aplanatic

Answer 2

Making FullCalendar work properly with Next.js requires some initial setup and a few changes to your initial code.

First, let's install next-transpile-modules to process fullcalendar's ES modules. Make sure to include all @fullcalendar dependencies you use.

// next.config.js

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

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

Next, add a custom Babel configuration to ignore CSS imports used in fullcalendar - babel-plugin-transform-require-ignore plugin will need to be installed. This prevents the Global CSS cannot be imported from within node_modules error from Next.js.

// babel.config.js

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

You'll have to include fullcalendar's global CSS in _app.js to compensate for this. Global CSS can only be imported from this file in Next.js.

// _app.js

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

Finally, you can simplify and refactor your FullCalendar component. Here you don't have to dynamically import its fullcalendar dependencies, we'll dynamically import the component itself when using it.

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

Then, dynamically import your custom component wherever it's used.

import dynamic from 'next/dynamic';

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

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

export default SomePage;

For reference, this is based on the official example from fullcalendar, with some adaptations to make it work with next-transiple-modules v6.4.0.

Shutter

Answer 3

Other implementation that's using next-transpile-modules may not work anymore in NextJS 13 (or NextJS 12 as well refer to @dikembe-mutombo).

According to FullCalendar example, here's how to make it works (at least tested on Next 13.2.4 and FullCalendar 6.1.6):

1. Make sure you installed @fullcalendar/core along with other FullCalendar package as you wished.
2. Since we no longer need next-transpile-modules, (if you added it before) we can remove it from next.config.js. Check example here.
3. Remove all FullCalendar CSS (usually in _app.jsx / _app.tsx).
4. Use FullCalendar component as usual. Check example here.

Shanley