![](/img/trans.png)
[英]Can't connect Google Calendar to Fullcalendar in React/Nextjs
[英]fullcalendar - NextJS - Dynamic import doesn't show calendar
我正在使用 NextJS 和 Fullcalendar。
我尝试使用fullcalendar
使用此示例中的动态导入(有关更多信息,此示例解决方案来自此处)。
它工作,但有一个问题。 几乎每 5 次刷新尝试中有 1 次以错误结束Please import the top-level fullcalendar lib before attempting to import a plugin
( 像这样,但在我的情况下版本是正确的)
之后,我发现 next/dynamic 的 modules 选项已被弃用。 我认为这是我的问题的根源(我不确定 100%,但至少它已被弃用并且需要更新)。
正如文档所说,处理动态导入的新方法是这样的:
const DynamicComponent = dynamic(() =>
import('../components/hello').then((mod) => mod.Hello)
)
但是因为我们需要多次导入,所以我找到了这个解决方案。
现在,似乎一切都应该正常工作,但我的代码没有效果。
import dynamic from "next/dynamic";
import { useEffect, useState } from "react";
import "@fullcalendar/common/main.css"; // @fullcalendar/react imports @fullcalendar/common
import "@fullcalendar/daygrid/main.css"; // @fullcalendar/timegrid imports @fullcalendar/daygrid
import "@fullcalendar/timegrid/main.css"; // @fullcalendar/timegrid is a direct import
import "./Fullcalendar.module.scss";
let CalendarComponent;
const Calendar = dynamic(() =>
import("@fullcalendar/react").then((module) => module.Calendar)
);
const dayGridPlugin = dynamic(() =>
import("@fullcalendar/daygrid").then((module) => module.dayGridPlugin)
);
export default function FullCalendar(props) {
const [calendarLoaded, setCalendarLoaded] = useState(false);
useEffect(() => {
CalendarComponent = () => (
<Calendar
{...props}
plugins={[dayGridPlugin]}
initialView="dayGridMonth"
/>
);
setCalendarLoaded(true);
}, []);
let showCalendar = (props) => {
if (!calendarLoaded) return <div>Loading ...</div>;
return <CalendarComponent {...props} />;
};
return <div>{showCalendar(props)}</div>;
}
我还找到了另一种使用下一个转译模块的方法。 但是他们说"there is currently no way to transpile only parts of a package, it's all or nothing"
。
事实上,我在next.config.js
中有一些东西。 将这个文件编辑成 transpile 模块是另一个神秘的冒险,充满了问题。
我应该怎么做?
使 FullCalendar 与 Next.js 正常工作需要一些初始设置并对初始代码进行一些更改。
首先,让我们安装next-transpile-modules
来处理fullcalendar
的 ES 模块。 确保包含您使用的所有@fullcalendar
依赖项。
// next.config.js
const withTM = require('next-transpile-modules')([
'@fullcalendar/common',
'@fullcalendar/react',
'@fullcalendar/daygrid'
]);
module.exports = withTM({
// any other next.js settings here
});
接下来,添加自定义 Babel 配置以忽略 fullcalendar 中使用的fullcalendar
导入 - 需要安装babel-plugin-transform-require-ignore
插件。 这可以防止Global CSS cannot be imported from within node_modules
错误来自 Next.js。
// babel.config.js
module.exports = {
presets: [
'@babel/preset-react'
],
overrides: [
{
include: ['./node_modules'],
plugins: [
[
'babel-plugin-transform-require-ignore',
{
extensions: ['.css']
}
]
]
}
]
};
您必须在 _app.js 中包含fullcalendar
的全局_app.js
以弥补这一点。 全局 CSS 只能从 Next.js 中的该文件导入。
// _app.js
import '@fullcalendar/common/main.css'
import '@fullcalendar/daygrid/main.css'
import '@fullcalendar/timegrid/main.css'
最后,您可以简化和重构您的FullCalendar
组件。 这里不用动态导入它的fullcalendar
依赖,我们会在使用的时候动态导入组件本身。
// components/FullCalendar.jsx
import 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" />
);
}
然后,在任何使用它的地方动态导入您的自定义组件。
import dynamic from 'next/dynamic';
const FullCalendar = dynamic(() => import('../components/FullCalendar'), {
ssr: false
});
const SomePage = () => {
return <FullCalendar />;
}
export default SomePage;
作为参考,这是基于fullcalendar
的官方示例,并进行了一些修改以使其与next-transiple-modules
v6.4.0 一起使用。
我们解决这个问题
第1步:首先按照上面的“juliomalves”回答next.config.js。 并且还在“_app.js”文件中导入 CSS 文件,也请遵循上述答案。
第 2 步:编写所有完整的日历代码,就像我们在 react js 中编写的一样,但将其作为一个单独的组件。
第 3 步:接下来使用 NextJS 动态导入导入“日历”组件。
import dynamic from 'next/dynamic';
const Calendar = dynamic(()=> import('../path/to/component/Calendar'),{ssr:false})
它现在应该可以工作了!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.