警告：prop“ id”不匹配。服务器：“ FC-DOM-171”客户：“ fc-dom-2”在Next.js中使用fullcalendar时

Question

上下文

我正在使用fullcalendar v5.11.0，nextjs v12.0.7，react v17.0.2 and typescript v4.3.5代码>。

我想基于 fullcalendar文档，所以我已经创建了一个>日历包含此代码的组件：

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;

我

在检查console.log的问题，我可以看到该错误：

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

我已经完成了研究，发现我们可以使用Dynamic与Next.js导入以禁用SSR为组件，但是经过一些尝试，我无法理解动态导入的工作方式。

这是我开始尝试的代码，而没有找到使它有效的方法：

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

我遇到的错误：

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

我是New next.js和fullcalendar，所以我可能会误解某些东西，尤其是关于动态导入的东西。有人知道我在做错什么或如何与Next.js正确使用FullCalendar吗？

Answer 1

您可以在使用何处，动态导入自定义日历组件。这样可以确保所有@fullcalendar依赖项在客户端动态导入。

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

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

您还应确保您不会在代码中其他任何地方导入@fullcalendar，因为这仍然可能触发错误。

codesandbox： https://codesandbox.io/s/s/s/s/s/s/fullcalendar-next-next-next-js-js-js-31hu2pp < /a>