警告：道具 `id` 不匹配。服务器："fc-dom-171" 客户端："fc-dom-2" 在 Next.js 中使用 FullCalendar 时

Question

上下文

我正在使用 FullCalendar v5.11.0、NextJS v12.0.7、React v17.0.2 和 Typescript v4.3.5。

我想创建一个基于 FullCalendar documentation 的简单日历，因此我创建了一个包含以下代码的 Calendar 组件：

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

我做了研究，我发现我们可以使用动态导入和 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.

我是 Next.js 和 FullCalendar 的新手，所以我可能误解了一些东西，尤其是关于动态导入。有人知道我做错了什么或如何通过 Next.js 正确使用 FullCalendar 吗？

Answer 1

您可以动态导入您的自定义 Calendar 组件，无论它在哪里使用。这确保所有 @fullcalendar 依赖项都动态导入到 client-side.

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/fullcalendar-next-js-31hu2p

警告：道具 `id` 不匹配。服务器："fc-dom-171" 客户端："fc-dom-2" 在 Next.js 中使用 FullCalendar 时

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

fullcalendar

typescript

reactjs

next.js

上下文

我的问题