import jquery webpack react Gatsby

Question

I am using Gatsby and importing jquery.

When I run Gatsby build I get the following error:

WebpackError: jQuery requires a window with a document.

This is due to Gatsby doing server side rendering.

I have read through a number of issues on GitHub (this one being the best one I could find).

My code looks like the following:

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

This is breaking so I tried the following based on the GitHub thread above, but this also fails:

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

Can anyone advise how to import jquery?

Answer 1

Gatsby's components will run on both Node (no window object there) in order to produce static HTML and on the client's browser as React components. This is why you get this error.

The plugin you are trying to use needs to run only on the client because it needs the actual viewport dimensions to operate. Gatsby has a special API for this that you can use to run the plugin only on client side. A quick solution would be to load jQuery there and initialize your plugin on onClientEntry.

I would also suggest you find a more lightweight plugin that does the same thing without the jQuery dependency. It's a pity to use jQuery in a React stack. Maybe somebody else can recommend one.