@全文日历/google-日历中断与“gatsby build”

Question

@calendar/google-日历似乎试图在静态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发生在服务器端(节点服务器)，显然没有窗口，因为它还没有定义。

这就是为什么您需要通过调用null API向webpack的配置中添加一个onCreateWebpackConfig加载程序，以避免服务器端的依赖转移溢出。

规则是一个正则表达式(这就是斜杠之间的原因)，从字面上讲，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 />
}