fullcalendar - NextJS - Dynamic import doesn't show calendar

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.jsconst 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.tsximport '@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.tsximport 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.

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.jsconst 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.jsmodule.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.jsimport '@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.jsximport 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.