来自Page -data的页面数据.失败页面/日历/的Json

Question

嗨，当我在盖茨比云上部署一个项目时，我得到这个错误，应该是什么问题?

当我在本地主机上运行项目时，我没有错误，一切工作正常，所以它是云的问题还是我应该在整个项目中改变一些东西?

误差

Page -data中的Page数据。{
componentChunkName": "component——src-pages-calendar- j";/calendar/， "result": {pageContext": {}}， "staticQueryHashes": ["2744905544";]}

详细信息请参见https://gatsby.dev/issue-how-to

为path/calendar/创建静态HTML失败

详细信息请参见https://gatsby.dev/debug-html

代码:

import React from "react"
import { GlobalStyle } from "../components/styles/GlobalStyles";
import HomeBar from "../components/HomeBar";
import Footer from "../components/Footer";
import styled from "styled-components";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import googleCalendarPlugin from '@fullcalendar/google-calendar';
// trzeba importować css do kazdego plugina manualnie
import "@fullcalendar/daygrid/main.css";
import "@fullcalendar/timegrid/main.css";


const BookingCalendar = () => {


return ( 
<>
<GlobalStyle></GlobalStyle>
<HomeBar></HomeBar>


<CalendarContainer lightBg="true">
<CalendarWrapper>
<FullCalendar
defaultView="dayGridMonth"
header={{
left: "today, prev,next",
center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek"
}}
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, googleCalendarPlugin]}
googleCalendarApiKey='apikey'
eventSources={[
{
googleCalendarId:"id"
},
]}
/>
</CalendarWrapper>
</CalendarContainer>



<Footer />
</>
)
};
const CalendarContainer = styled.div`
color: #fff;
background: ${({ lightBg }) => (lightBg ? "#0c0c0c" : "#010606")};
@media screen and (max-width: 768px) {
padding: 100px 0;
}
`;
const CalendarWrapper = styled.div`
display: grid;
z-index: 1;
height: 860px;
width: 100%;
max-width: 1100px;
margin-right: auto;
margin-left: auto;
padding: 0 24px;
justify-content: flex;
`;
export default BookingCalendar;

Answer 1

我做了一些类似的事情，它工作了

添加

gatsby-node.js

文件，包含以下内容

exports.onCreateWebpackConfig = ({stage, loaders, actions}) => {
if (stage === "build-html") {
actions.setWebpackConfig({
module: {
rules: [
{
test: /@fullcalendar/react/,
use: loaders.null(),
},
{
test: /@fullcalendar/daygrid/,
use: loaders.null(),
},
{
test: /@fullcalendar/timegrid/,
use: loaders.null(),
},
{
test: /@fullcalendar/interaction/,
use: loaders.null(),
},
{
test: /@fullcalendar/google-calendar/,
use: loaders.null(),
},
],
},
})
}
}

然后我使用了一个可加载组件来封装我的日历

import Loadable from "react-loadable";

const LoadableCalendar = Loadable({
loader: () => import('@fullcalendar/react'),
loading: () => <div>Loading...</div>,
render(loaded, props) {
let Cal = loaded.default;
return <Cal {...props} />
}
})

不是

FullCalendar

我用

<LoadableCalendar
defaultView="dayGridMonth"
header={{
left: "today, prev,next",
center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek"
}}
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, googleCalendarPlugin]}
googleCalendarApiKey='apikey'
eventSources={[
{
googleCalendarId:"id"
},
]}
/>

希望我能帮上忙。