How do I link my jQuery scripts into Gatsby?

[LayersOfAbstraction]

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.

GitHub - LayersOfAbstraction/joshuafluke.github.io at gatsby-integration-v2

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>
  </>
  );
}

[LayersOfAbstraction]

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>

[LayersOfAbstraction]

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