How do I link my jQuery scripts into Gatsby?

Greetings!

What is my question?

I am having diffuclty trying to integrate my jquery scripts into my Gatsby website.

It used to be a HTML5 Up website theme.

And now it is Gatsby.

Everything else works inside it, the fonts, css etc. Just not the jquery scripts so I cannot get the following elements displaying.

The side bar which is referenced in the code as ‘navPanel’
Or the massively icon which is referenced in the code as ‘header’

I will get 404 with all the jquery files as shown here.

Steps to recreate?

Go to where ever you store your local projects and run this.

git clone https://github.com/LayersOfAbstraction/joshuafluke.github.io.git
cd joshuafluke.github.io/gatgsby-companion-site
git fetch
git checkout gatsby-integration-v2
git reset --hard origin/gatsby-integration-v2
npm install 
gatsby develop

If you cannot see the gatsby-integration-v2 branch just get it from here.

What have I done to solve the problem?

I went here to this tutorial and installed react Helmet like this.

npm install react-helmet gatsby-plugin-react-helmet

I wraped all the scripts in the helmet tag like this in my index.js file:

import { Link } from "gatsby"
import React from "react"
import pic1 from "../images/pic01.jpg"

import pic2 from "../images/pic02.jpg"
import pic3 from "../images/pic03.jpg"
import "../assets/css/font-awesome.min.css"
import "../assets/css/main.css"
import "../assets/css/noscript.css"

import { Helmet } from "react-helmet"
import { withPrefix } from "gatsby"
export default function Home() {
return(
<>
    {/* ....Omitted code.*/}
    <Helmet>
        <script src={withPrefix('../assets/js/jquery.min.js')} />
        <script src={withPrefix('../assets/js/jquery.scrollex.min.js')}  />
        <script src={withPrefix('../assets/js/jquery.scrolly.min.js')}  />
        <script src={withPrefix('../assets/js/browser.min.js')}  />
        <script src={withPrefix('../assets/js/breakpoints.min.js')}  />
        <script src={withPrefix('../assets/js/util.js')}  />
        <script src={withPrefix('../assets/js/main.js')}  />
    </Helmet>
  </>
  );
}

Well I will say that tutorial is poorly written but I did figure out how to get the files to import without all the 404 error messages. There are some issues still as for some reason (did not investigate), jQuery is not recognized by your main.js file.

To resolve the 404 errors when loading the files, you need to create a folder named static and put it in the root of the gatsby-companion-site folder. Inside that folder you need to put the js folder and include all the .js files you want to include in the project. Gatsby will take care of moving the files into the public folder. All you have to do is properly reference them in the withPrefix part like:

    <Helmet>
        <script src={withPrefix('./js/jquery.min.js')} type="text/javascript" />
        <script src={withPrefix('./js/jquery.scrollex.min.js')} type="text/javascript" />
        <script src={withPrefix('./js/jquery.scrolly.min.js')} type="text/javascript" />
        <script src={withPrefix('./js/browser.min.js')} type="text/javascript" />
        <script src={withPrefix('./js/breakpoints.min.js')} type="text/javascript" />
        <script src={withPrefix('./js/util.js')} type="text/javascript" />
        <script src={withPrefix('./js/main.js')} type="text/javascript" />
    </Helmet>

NOTE: This is the first time I have every messed with Gatsby, so there may be something extra that needs to be done to get everything working. All I was after was removing the 404 errors.

Hi Randell,

You are right, there is something else I am missing. I do not know what but I keep getting the 404 errors with the same scripts. Even though I used your method.

I tried pasting the code in and kept getting the same errors.

I also have already tried with the static folder already and kept getting the same errors.

this is what my code looks like currently. The folder paths match with what’s in my static folder. Just getting the same errors.

    <Helmet>
        <script src={withPrefix('../../static/jquery.min.js')} type="text/javascript" />
        <script src={withPrefix('../../static/jquery.scrollex.min.js')} type="text/javascript" />
        <script src={withPrefix('../../static/jquery.scrolly.min.js')} type="text/javascript" />
        <script src={withPrefix('../../static/browser.min.js')} type="text/javascript" />
        <script src={withPrefix('../../static/breakpoints.min.js')} type="text/javascript" />
        <script src={withPrefix('../../static/util.js')} type="text/javascript" />
        <script src={withPrefix('../../static/main.js')} type="text/javascript" />
    </Helmet>

You should not be linking to the static folder using withPrefix. You need to but all the files in the static folder and then link as if they were in the public folder (your webroot).

Tried that too and kept files in web root. No joy.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.