Warning: Prop `id` did not match. Server: "fc-dom-171" Client: "fc-dom-2" when using FullCalendar in Next.js

Question

Context

I'm using FullCalendar v5.11.0, NextJS v12.0.7, React v17.0.2 and Typescript v4.3.5.

I wanted to create a simple calendar, based on FullCalendar documentation, so I've created a Calendar component that is containing this code:

import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import Card from '../Card/Card';
import styles from './Calendar.module.scss';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';

type CalendarProps = {
  className?: string;
};

const Calendar = ({ className }: CalendarProps) => {
  return (
    <Card
      className={
        styles.calendarWrapper +
        (className !== undefined ? ' ' + className : '')
      }
    >
      <FullCalendar
        plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
        locale='fr'
        firstDay={1}
        headerToolbar={{
          start: 'prev next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay',
        }}
        businessHours={{
          // days of week. an array of zero-based day of week integers (0=Sunday)
          daysOfWeek: [1, 2, 3, 4, 5], // Monday - Thursday

          startTime: '7:00', // a start time
          endTime: '23:00', // an end time
        }}
        nowIndicator={true}
        selectable={true}
        selectMirror={true}
        weekNumbers={true}
        weekNumberFormat={{ week: 'numeric' }}
        initialView='dayGridMonth'
        eventColor='var(--sw-color-accent-300)'
        eventTextColor='var(--sw-color-primary-900)'
      />
    </Card>
  );
};

export default Calendar;

My problem

Where I'm checking the console.log, I can see that error:

Warning: Prop `id` did not match. Server: "fc-dom-1" Client: "fc-dom-2"

See more info here: https://nextjs.org/docs/messages/react-hydration-error

I've done research and I found that we can use dynamic import with Next.js to disable SSR for a component, but after some tries I can't understand how dynamic imports are working.

Here is the code I started to try, without finding a way to make it works:

const FullCalendarWithNoSSR = dynamic(
  () => import('@fullcalendar/react').then((mod: any) => mod.FullCalendar),
  { ssr: false }
);

And the error I get:

Error: Please import the top-level fullcalendar lib before attempting to import a plugin.

I'm new with Next.js and FullCalendar, so I'm probably misunderstanding something, especially about dynamic imports. Does someone have an idea of what I'm doing wrong or how to use FullCalendar properly with Next.js?

Answer 1

You can dynamically import your custom Calendar component instead, wherever it's used. This ensures all @fullcalendar dependencies are dynamically imported on the client-side.

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

export default function IndexPage() {
    return (
        <Calendar />
    );
}

You should also make sure you're not importing @fullcalendar anywhere else in your code, as that may still trigger the error.

Codesandbox: https://codesandbox.io/s/fullcalendar-next-js-31hu2p