score:5

Accepted answer

after a more extensive search, i found a couple of articles with a solution. this was the first approach:

import { withprefix } from "gatsby"
import helmet from "react-helmet"

const indexpage = () => (
  <div>
    <helmet>
        <script src={withprefix('revolution/js/extensions/revolution.extension.actions.min.js')} type="text/javascript" />
    </helmet>

  </div>
)
export default indexpage

this is the second approach using the gatsby-ssr.js file:

const react = require("react")

exports.onrenderbody = ({setpostbodycomponents}) => {
          setpostbodycomponents([
            <script key="1" src={'js/plugins/plugins.js'} type="text/javascript" />,
            <script type="text/javascript" src={"js/beauty.custom.js"}/>
          ]);
  };

this way the scripts tags will be added at the end of the body instead of the head

i think the second one is the best one, but have to take in count that every time you change something in the gatsby-ssr.js file have to stop the gatsby develop and re-run it.

in the first case usingreact-helmet will hot-reload.

note: in both approaches, files have to be in the static folder

here are the links to where i found this approach:

how to include local javascript on a gatsby page?

how do you insert an external script using gatsby-browser?

score:0

@ddieppa solution might not work if you demand your script must only be executed after the component/page is completely loaded, because:

  • react-helmet always put your tag on top of the page inside the <head> tag, no matter where you put it.
  • gatsby server rendering api - setpostbodycomponents via (gatsby-ssr.jsx/tsx) will append your <script> tag at the end of the body nicely, but watch out because your script file might actually executed before react completely finishes rendering your component. if your js file is referring to any specific object in the component, you might end up seeing a bunch of null pointer exception, undefined exception.

so if you want to make sure your script file get executed/loaded right after the component is completely rendered, you might need to use either react useeffect hook (if your react component is a functional component) or react componentdidmount (if your component is a class component)

the idea will be simple, after the component is fully rendered, we will append a <script> at the bottom of it.

with useeffect hook (for functional component)

(it's the same for componentdidmount)

import react, { useeffect } from 'react'

const mycomponent = () => {

    useeffect(() => {
        const mainjstag = document.createelement('script')
        // given the js/main.js file is put in the static folder
        mainjstag.src = 'assets/js/main.js'
        document.body.appendchild(mainjstag)
        console.log('component rendered!')
    });

    return (
        <main>
          <text>pretty much the component's body here...</text>
        </main>
    )
}

export default mycomponent

(the snippet above assuming that you put your script file under the gatsby static folder, see gatsby - using the static folder in case you don't know about this concept in gatsby)

you can put a bunch of console.log in both of your script file and in the useeffect/componentdidmount functions to confirm which one get executed first.


Related Query

More Query from same tag