How to include jQuery in a Gatsby.js project?

by

If you want to add jQuery as an external (load from CDN) to gastby, it’s a bit tricky. You’d need to:

  • add jquery CDN to html.js
  • add external to webpack config in gatsby-node.js

Add jQuery to html.js

⚠️ Edit: This should be done via gatsby-ssr, please refer @rosszember answer for context..

You’ve probably already done this: cp .cache/default-html.js src/html.js, and add

// src/html.js
<head>
  <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossOrigin="anonymous"
  />
</head>

But there’s a caveat: it’s crossOrigin, not crossorigin.
At this point, if you use $ even in componentDidMount, it’d still throw error, as webpack doesn’t know about jquery.

Add external to webpack config in gatsby-node.js

We need to inform webpack about jQuery.

//gatsby-node.js
exports.onCreateWebpackConfig = ({
  actions,
}) => {
  const { setWebpackConfig } = actions;
  setWebpackConfig({
    externals: {
      jquery: 'jQuery', // important: 'Q' capitalized
    }
  })
}

Usage

Now, in componentDidMount you can do

import $ from 'jquery' // important: case sensitive.

componentDidMount() {
  $('h1').css('color', 'red');
}

Why case sensitive

When we set external: { X: Y } We’re essentially telling webpack that ‘wherever I do import X‘, look for the Y in the global scope. In our case, webpack’ll look for jQuery in window. jQuery attachs itself to window with 2 names: jQuery and $. This is why the capitalized Q is important.

Also, to illustrate, you can also do: external: { foo: jQuery } and use it like import $ from foo. It should still work.

Hope that helps!

More Related Contents:

  1. jQuery, simple polling example
  2. jQuery same click event for multiple elements
  3. jQuery if checkbox is checked
  4. jQuery Datepicker with text input that doesn’t allow user input
  5. jQuery validator and a custom rule that uses AJAX
  6. jQuery CORS Content-type OPTIONS
  7. jquery ui Dialog: cannot call methods on dialog prior to initialization
  8. Retrieve Button value with jQuery
  9. Form Submit jQuery does not work
  10. Is there a version of $getJSON that doesn’t use a call back?
  11. replace div content using ajax and jquery
  12. jQuery – is it bad to have multiple $(document).ready(function() {});
  13. JQuery change inner text but preserve html
  14. Using jQuery to programmatically click an link
  15. JSONP call showing “Uncaught SyntaxError: Unexpected token : “
  16. How to make Jqgrid frozen column word-wrap
  17. How to move child element from one parent to another using jQuery [duplicate]
  18. jquery how to catch enter key and change event to tab
  19. Validate dynamic field jquery
  20. CSS for the “down arrow” on a element?
  21. jQuery – draggable images on iPad / iPhone – how to integrate event.preventDefault();?
  22. Can someone explain how to implement the jQuery File Upload plugin?
  23. jQuery How to Get Element’s Margin and Padding?
  24. jQuery how to undo a select change
  25. How to make datatable row or cell clickable?
  26. Getting the current src of an Iframe using JQuery [duplicate]
  27. Mailchimp subscribe using jQuery AJAX?
  28. Rails 3.1 remote requests submitting twice
  29. Remove vertical lines in jqGrid
  30. JavaScript – Escape double quotes

Leave a Comment