Cannot get external JS file to work with Gatsby site

[austinmdem]

Description

I have a script file with some minimal javascript I need to implement. I've tried using react-helmet and it works, but I need the JS to reload on page routes, which it doesn't.

I've tried using gatsby-browser.js and gatsby-ssr.js and have had no luck.

Also, I tried putting JS in html.js and also not working.

Steps to reproduce

Here is how I would implement the script with gatsby-browser.js:

const addScript = url => {
    const script = document.createElement("script")
    script.src = url
    script.async = true
    document.body.appendChild(script)
  }
  
  export const onClientEntry = () => {
    window.onload = () => {
      addScript("./static/app.js")
    }
  }

Here is how I would try to use gatsby-ssr.js:

export const onRenderBody = ({ setPostBodyComponents }) => { setPostBodyComponents([ <script src="./static/app.js"</script>, ]), }

I copied raw JS out of script file and put it in between `` in html.js in the recommended way and my JS doesn't seem to work as well. Maybe there is something wrong with my code (works fine with helmet), so here is my JS below for what its worth:

/*
  Video
*/
const playVideoLink = Array.from(
  document.getElementsByClassName("js-play-video")
)
playVideoLink.forEach(videoLink => {
  videoLink.addEventListener("click", e => {
    e.preventDefault()

    playVideo(videoLink)
  })
})

const playVideo = function (link) {
  let videoPopup = `
    <span class="popup__close"></span>
    <div class="popup__wrapper">
      <div class="popup__video"></div>
    </div>`
  let video = document.createElement("section")
  video.className = "popup"
  video.innerHTML = videoPopup
  document.body.appendChild(video)

  let videoHTML = `<iframe src="https://www.youtube.com/embed/${link.dataset.video.replace(
    "https://www.youtube.com/watch?v=",
    ""
  )}"></iframe>`

  const videoDiv = document.querySelector(".popup__video")
  videoDiv.innerHTML = videoHTML
}

const closeVideoPopup = function () {
  document.getElementsByClassName("popup")[0].remove()
}

document.addEventListener("keydown", e => {
  if (e.keyCode === 27 && document.getElementsByClassName("popup").length) {
    closeVideoPopup()
  }
})

document.addEventListener("click", e => {
  if (e.target.classList.contains("popup__close")) {
    closeVideoPopup()
  }
})

 /*
   FAQ
 */
 const toggleFAQ = function (question) {
   if (question.parentElement.classList.contains("is-opened")) {
     question.parentElement.classList.remove("is-opened")
   } else {
     question.parentElement.classList.add("is-opened")
   }
 }
 if (document.querySelector(".faq") !== null) {
   const questions = Array.from(document.getElementsByClassName("faq__question"))

   questions[0].parentElement.classList.add("is-opened")

   questions.forEach(question => {
     question.addEventListener("click", e => toggleFAQ(question))
   })
 }

Expected result

For JS to work on all pages through out site.

Actual result

When using:

react-helmet - my JS works but only on refresh or first render, need it to reload after page routes.

gatsby-browser.js - I can see my app.js file in the body, but no JS works throughout the site.

gatsby-ssr.js - I usually get an "unexpected token error '>" app.js line 1.

html.js - my JS is unable to format saying theres errors but I'm unable to figure out why.

Environment

System:
OS: macOS 10.15.7
CPU: (4) x64 Intel(R) Core(TM) i5-4670 CPU @ 3.40GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 14.14.0 - /usr/local/bin/node
npm: 6.14.8 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 86.0.4240.80
Safari: 14.0
npmPackages:
gatsby: ^2.24.80 => 2.24.80
gatsby-image: ^2.4.20 => 2.4.20
gatsby-plugin-load-script: ^1.1.0 => 1.1.0
gatsby-plugin-manifest: ^2.4.33 => 2.4.33
gatsby-plugin-offline: ^3.2.30 => 3.2.30
gatsby-plugin-react-helmet: ^3.3.12 => 3.3.12
gatsby-plugin-react-svg: ^3.0.0 => 3.0.0
gatsby-plugin-remove-serviceworker: ^1.0.0 => 1.0.0
gatsby-plugin-sass: ^2.3.16 => 2.3.16
gatsby-plugin-sharp: ^2.6.38 => 2.6.38
gatsby-source-filesystem: ^2.3.32 => 2.3.32
gatsby-transformer-sharp: ^2.5.16 => 2.5.16
npmGlobalPackages:
gatsby-cli: 2.12.109

[herecydev]

You can use onRouteUpdate to trigger some javascript when a page is changed. You should be able to call whatever you need from there.