Page data from page-data.json for the failed page /calendar/

user_14579733 0
Viewed 50

Hi i get this error when i deploy a project on gatsby cloud what suppose to be the problem?

When i run project on localhost i get no errors, everything works fine, so is it a problem with the cloud or should i change something in the whole project?

ERROR

Page data from page-data.json for the failed page /calendar/: {
"componentChunkName": "component---src-pages-calendar-js", "path": /calendar/, "result": { "pageContext": {} }, "staticQueryHashes": [ "2744905544" ] }

For more details see https://gatsby.dev/issue-how-to

Building static HTML failed for path /calendar/

For more details see https://gatsby.dev/debug-html

the code:

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;
gatsby reactjs fullcalendar html javascript
1 Answers

I did something like that, and it worked

added a

gatsby-node.js

file with the following filling

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(),
              },
          ],
        },
      })
    }
  }

and then I used a Loadable Component to wrap my calendar in it

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} />
    }
  })

instead of

FullCalendar

I used

 <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"
                      },
                ]}
            />

That's all

Hope I helped some1

user_145797330
Related