@fullcalendar/google-calendar 换成 'gatsby build'

Question

@fullcalendar/google-calendar 似乎试图在静态 gatsby 构建期间获取 JSON。我不确定从哪里开始寻找。

当我的项目运行 gatsby build 时，构建因以下错误而中断：

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

页面定义如下：

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

我不确定如何创建可执行的测试用例，但很高兴收到建议。任何关于我如何完成这项工作的指示都将不胜感激。

使用@loadable 适用于构建和开发版本。

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

尝试在 gatsby-node.js 中使用以下代码段：

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

一些 third-party dependencies use some global objects like window or document 来制作他们的东西。这在运行 gatsby develop 时完全有效，因为代码是在浏览器端编译的。但是，gatsby build 出现在服务器端（您的节点服务器），显然没有 window，因为它甚至还没有定义。

这就是为什么您需要通过调用 onCreateWebpackConfig API 将 null 加载程序添加到 webpack 的配置中，以避免在服务器端进行依赖性转换。

规则是一个正则表达式（这就是斜线之间的原因），字面意思是，test 值与 node_modules 文件夹中的路径匹配以查找依赖项位置，因此，您必须把确切的文件夹名称放在那里，我假设那是 @fullcalendar/google-calendar 但你有一些潜在的文件夹也可能会造成冲突：

import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import googleCalendarPlugin from '@fullcalendar/google-calendar';

使用@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 />
}

@fullcalendar/google-calendar 换成 'gatsby build'

@fullcalendar/google-calendar breaks with 'gatsby build'

node.js

webpack

fullcalendar

gatsby

fullcalendar-5