title: import jquery webpack react Gatsby
body: <p>I am using Gatsby and importing <code>jquery</code>.</p>
  
  <p>When I run <code>Gatsby build</code> I get the following error:</p>
  
  <blockquote>
    <p>WebpackError: jQuery requires a window with a document.</p>
  </blockquote>
  
  <p>This is due to Gatsby doing server side rendering.</p>
  
  <p>I have read through a number of issues on GitHub (<a href="https://github.com/gatsbyjs/gatsby/issues/3564" rel="nofollow noreferrer">this one</a> being the best one I could find).</p>
  
  <p>My code looks like the following:</p>
  
  <pre><code>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 (
        &lt;main id="fullpage"&gt;
          &lt;LandingScreen /&gt;
        &lt;/main&gt;
      )
    }
   }
  
  
  export default TestPage
  </code></pre>
  
  <p>This is breaking so I tried the following based on the GitHub thread above, but this also fails:</p>
  
  <pre><code>if (typeof window !== 'undefined') {
      import $ from 'jquery'
  }
  </code></pre>
  
  <p>Can anyone advise how to import <code>jquery</code>?</p>