Gatsby Script API Not Loading Files

Question

I'm using Gatsby v4.25.3 and I'm trying convert the loading of some third party scripts to the new <Script> tag. I've converted the load of three Bootstrap related files in my html.js file:

import { Script } from "gatsby";

import PropTypes from "prop-types"
import React from "react"

export default function HTML(props) {
  return (
    <html {...props.htmlAttributes}>
      <head>
        <meta charSet="utf-8" />
        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        {props.headComponents}
      </head>
      <body {...props.bodyAttributes}>
        {props.preBodyComponents}
        <noscript key="noscript" id="gatsby-noscript">
          This app works best with JavaScript enabled.
        </noscript>
        <div
          key={`body`}
          id="___gatsby"
          dangerouslySetInnerHTML={{ __html: props.body }}
        />
        {props.postBodyComponents}
        <Script onLoad={() => console.log("success")}
          onError={() => console.log("sadness")} src="/bootstrap.min.js" />
        <Script onLoad={() => console.log("success")}
          onError={() => console.log("sadness")} src="/jquery.min.js" />
        <Script onLoad={() => console.log("success")}
          onError={() => console.log("sadness")} src="/popper.min.js" />
        <div id="recent-comments" style={{ display: 'none' }}>
        <style dangerouslySetInnerHTML={{
          __html:
            `.form-preview {
            display: flex;
      flex-direction: column;
      justify-content: center;
      }`}} />
      </body>
    </html>
  )
}

HTML.propTypes = {
  htmlAttributes: PropTypes.object,
  headComponents: PropTypes.array,
  bodyAttributes: PropTypes.object,
  preBodyComponents: PropTypes.array,
  body: PropTypes.string,
  postBodyComponents: PropTypes.array,
}

Unfortunately, I don't get any errors/warnings/log entries in the browser console for any of the files. Looking in the network dev tab I also don't see the files being requested. The files are served correctly if I manually request them.

I've looked at the documentation and don't see what I'm missing: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-script/

Ferran Buireu · Accepted Answer · 2023-01-16 16:46:11Z

1

Have you tried setting them in any other file/component rather than the html.js?

const Layout = ({ children }) => {
  return (
    <>
      <Header/>
        <Script onLoad={() => console.log("success")}
          onError={() => console.log("sadness")} src="/bootstrap.min.js" />
        <Script onLoad={() => console.log("success")}
          onError={() => console.log("sadness")} src="/jquery.min.js" />
        <Script onLoad={() => console.log("success")}
          onError={() => console.log("sadness")} src="/popper.min.js" />
      {children}
      <Footer/>
    </>
  )
};

export default Layout;

To me, it looks that the strategy of adding it in the html.js collides with the postBodyComponents (or any other onRenderBody parameters) and with the rehydration of the custom html.js

edited Jan 16, 2023 at 16:46

answered Jan 16, 2023 at 7:17

Ferran Buireu

29.4k7 gold badges48 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

saschwarz Over a year ago

thank you! That solved it, I was unaware of that interaction.

Collectives™ on Stack Overflow

Gatsby Script API Not Loading Files

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related