警告：道具"id"不匹配。服务器："fc-dom-171"客户端：在"下一步"中使用"完整日历"时"fc-dom-2".js

Question

上下文

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

我想在FullCalendar文档的基础上创建一个简单的日历，所以我创建了一个包含以下代码的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依赖项。

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