首页 > 编程语言> 文章详细

JavaScript-导入jquery webpack反应盖茨比

2019-11-09 08:37:36 阅读：280 来源： 互联网

标签：reactjs webpack gatsby javascript

我正在使用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.也许其他人可以推荐一个.

标签：reactjs,webpack,gatsby,javascript
来源： https://codeday.me/bug/20191109/2012759.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript-导入jquery webpack反应盖茨比