#fullcalendar/google-calendar breaks with 'gatsby build' - node.js

Question

#fullcalendar/google-calendar seems to try to fetch JSON during the static gatsby build. I am unsure where to start looking.
When running gatsby build on my project the build breaks with the following error:
failed Building static HTML for pages - 3.026s
error Building static HTML failed for path "/calendar/"
6431 | body = encodeParams(params);
6432 | }
> 6433 | var xhr = new XMLHttpRequest();
| ^
6434 | xhr.open(method, url, true);
6435 | if (method !== 'GET') {
6436 | xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
WebpackError: ReferenceError: XMLHttpRequest is not defined
- main.js:6433
node_modules/#fullcalendar/common/main.js:6433:1
- main.js:54
node_modules/#fullcalendar/google-calendar/main.js:54:24
- main.js:6199
node_modules/#fullcalendar/common/main.js:6199:1
- main.js:6187
node_modules/#fullcalendar/common/main.js:6187:1
- main.js:6170
node_modules/#fullcalendar/common/main.js:6170:1
- main.js:6162
node_modules/#fullcalendar/common/main.js:6162:1
- main.js:6113
node_modules/#fullcalendar/common/main.js:6113:1
- main.js:6928
node_modules/#fullcalendar/common/main.js:6928:1
- main.js:7306
node_modules/#fullcalendar/common/main.js:7306:1
The page is defined as follows:
import React from "react"
import FullCalendar from '#fullcalendar/react'
import dayGridPlugin from '#fullcalendar/daygrid'
import googleCalendarPlugin from '#fullcalendar/google-calendar';
export default class DemoApp extends React.Component {
render() {
return (
<FullCalendar
plugins={[ dayGridPlugin, googleCalendarPlugin]}
initialView="dayGridMonth"
googleCalendarApiKey='XXX'
height="100vh"
eventSources= {[
{
googleCalendarId: 'en.indian#holiday#group.v.calendar.google.com',
color: '#1f78b4'
}
]}
/>
)
}
}
I am not sure how to create an executable test case, but am very happy to receive advice. Any pointers on how I can make this work would be highly appreciated.
Using #loadable works both for build and develop versions.
import React from "react"
import loadable from '#loadable/component'
const OtherComponent = loadable(() => import('../components/calendar.js'))
function MyComponent() {
return (
<OtherComponent />
)
}
export default function Home() {
return <MyComponent />
}

Answer 1

Try using the following snippet in your gatsby-node.js:
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
if (stage === "build-html") {
actions.setWebpackConfig({
module: {
rules: [
{
test: /#fullcalendar\/google-calendar/,
use: loaders.null(),
},
],
},
})
}
}
Some third-party dependencies use some global objects like window or document to make their stuff. This is perfectly valid when running gatsby develop since the code is compiled on the browser-side. However, gatsby build occurs in the server-side (your Node server) where obviously no window, because it's not even already defined yet.
That's why you need to add a null loader to the webpack's config by calling the onCreateWebpackConfig API, to avoid the dependency transpilation on the server-side.
The rule is a regular expression (that's why is between slashes) and literally, the test value matches a path in your node_modules folder to look for the dependency location, so, you must put there the exact folder name, I've assumed that is #fullcalendar/google-calendar but you have some potential folders that may create the conflict too:
import FullCalendar from '#fullcalendar/react'
import dayGridPlugin from '#fullcalendar/daygrid'
import timeGridPlugin from '#fullcalendar/timegrid'
import googleCalendarPlugin from '#fullcalendar/google-calendar';
Using #loadable/component:
import React from "react"
import loadable from '#loadable/component'
const OtherComponent = loadable(() => import('../components/calendar.js'))
function MyComponent() {
return (
<OtherComponent />
)
}
export default function Home() {
return <MyComponent />
}