¿Cómo incluir javascript local en una página de Gatsby?

Solución:

Después de varias horas de frustración, finalmente encontré una discusión en GitHub que resolvió esto por mí. En Gatsby, hay una cosa llamada carpeta estática, para la cual un caso de uso incluye un pequeño script fuera del código incluido.

Cualquier otra persona en la misma situación, intente proceder de la siguiente manera:

1. Crea una carpeta static a la raíz de su proyecto.

2. Pon tu guion script.js en la carpeta static.

3. Incluya el guión en su react dom con casco de reacción.

Entonces, en el caso del código que publiqué en mi pregunta original, por ejemplo:

import React from "react"
import Helmet from "react-helmet"
import { withPrefix, Link } from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"

const IndexPage = () => (
  <Layout>
    <Helmet>
        <script src={withPrefix('script.js')} type="text/javascript" />
    </Helmet>
    <SEO title="Home" keywords={[`gatsby`, `application`, `react`]} />
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
      <Image />
    </div>
    <Link to="/page-2/">Go to page 2</Link>
  </Layout>
)

Fíjate en las importaciones

import Helmet from "react-helmet"
import { withPrefix, Link } from "gatsby"

y el elemento script.

<Helmet>
    <script src={withPrefix('script.js')} type="text/javascript" />
</Helmet>

Esto me hubiera ahorrado horas de mi tiempo, espero que esto lo haga por otra persona.

Hay muchas formas de agregar scripts en GatsbyJS …

Para ejecutar un script en una página específica

• crear un apátrida scriptComponent.js archívelo y colóquelo dentro de su /src carpeta.

• en tus scriptComponent.js usar require() para ejecutar el script dentro useEffect() como esto:

   useEffect(() => {
     // This runs the script
     const myScript = require('../script.js')
   }, [])
  
   return <div />
  

• Para ejecutarlo en el lado del cliente, puede verificar el window objeto dentro de tu script.js expediente:

   if(typeof window !== 'undefined' && window.document) {
      // Your script here...
   }
  

• finalmente, vaya a la página en la que desea ejecutar el script (p. ej. /pages/myPage.js ) y agregue el componente <scriptComponent />

Si quieres ejecutar un script globalmente en (cada componente / página) puede utilizar el html.js expediente.

• primero, tendrá que extraer el archivo (en caso de que no lo haya hecho) ejecutando:

cp .cache/default-html.js src/html.js

• dentro de tu html.js expediente:

<script dangerouslySetInnerHTML= {{ __html:`
  // your script here...
`}} />

---

---

Utiliza Nuestro Buscador