Question

我正在使用Gatsby并导入jquery。

当我运行Gatsby build时，我收到以下错误：

WebpackError：jQuery需要一个带文档的窗口。

这是由于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吗？

Answer 1

Gatsby的组件将在两个Node（没有this.getView().byId("wizID").nextStep()对象）上运行，以便生成静态HTML，并在客户端的浏览器上运行React组件。这就是您收到此错误的原因。

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

我还建议你找一个更轻量级的插件，在没有jQuery依赖的情况下做同样的事情。在React堆栈中使用jQuery是很遗憾的。也许其他人可以推荐一个。

Answer 2

彼得，I recently reported this to jQuery maintainers，但他们礼貌地告诉我......嗯......踢石头。如果你能对他们有点唠叨，那就好了。

目前jquery绝对需要window个对象，因此它不会将Node.js作为依赖项工作。（但有一个例外：如果您不需要全局jquery对象，但只需要一个模块中的本地实例，您可以使用JSDom手动初始化它，但这可能不是您的用例）

解决这个问题的方法是，您实际上不必在服务器端导入jQuery或其插件。所以我的方法是分别为客户端捆绑包和服务器端捆绑包创建2个单独的入口点文件 - app.jsx和server.jsx，并将Layout.jsx创建为共享根组件。

app.jsx和server.jsx分别是客户端捆绑包和服务器端捆绑包的入口点，而Layout.jsx包含带有html的共享代码。

我只在app.jsx包中导入jquery，所以在客户端它存在。在服务器端，它永远不会导入，也不会包含在服务器包中。

您可以查看my blog's code，如何在其中设置Webpack以及server rendering。

导入jquery webpack反应盖茨比

2 个答案: