我正在使用Gatsby并导入jquery.

当我运行Gatsby构建时,出现以下错误：

WebpackError: jQuery requires a window with a document.

这是由于Gatsby进行了服务器端渲染.

我已经在GitHub上阅读了许多问题(this one是我能找到的最好的问题).

我的代码如下所示：

import React, { Component } from 'react'
import Link from 'gatsby-link'
import LandingScreen from '../components/LandingScreen'
import $from 'jquery'
import 'fullpage.js/dist/jquery.fullPage.js'
import 'fullpage.js/dist/jquery.fullpage.css'

class TestPage extends Component {

  componentDidMount() {        
    $('#fullpage').fullpage({
        verticalCentered: false
    });
  }

  render(){

    return (
      <main id="fullpage">
        <LandingScreen />
      </main>
    )
  }
 }


export default TestPage

这很麻烦,所以我根据上面的GitHub线程尝试了以下操作,但这也失败了：

if (typeof window !== 'undefined') {
    import $from 'jquery'
}

谁能建议如何导入jQuery？

解决方法:

Gatsby的组件将在两个Node(那里没有窗口对象)上运行以生成静态HTML,并在客户端的浏览器上作为React组件运行.这就是为什么您会收到此错误的原因.

您尝试使用的插件仅需要在客户端上运行,因为它需要实际的视口尺寸才能运行. Gatsby有一个特殊的API for this,您只能在客户端使用它来运行插件.一种快速的解决方案是在其中加载jQuery并在onClientEntry上初始化您的插件.

我还建议您找到一个轻量级的插件,该插件在没有jQuery依赖的情况下执行相同的操作.很遗憾在React堆栈中使用jQuery.也许其他人可以推荐一个.