Gatsby Script API не загружает файлы

Я использую Gatsby v4.25.3 и пытаюсь преобразовать загрузку некоторых сторонних скриптов в новый тег <Script>. Я преобразовал загрузку трех файлов, связанных с Bootstrap, в свой файл html.js:

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.info("success")}
          onError = {() => console.info("sadness")} src = "/bootstrap.min.js" />
        <Script onLoad = {() => console.info("success")}
          onError = {() => console.info("sadness")} src = "/jquery.min.js" />
        <Script onLoad = {() => console.info("success")}
          onError = {() => console.info("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,
}

К сожалению, я не получаю никаких ошибок/предупреждений/записей журнала в консоли браузера ни для одного из файлов. Глядя на вкладку network dev, я также не вижу запрашиваемых файлов. Файлы обслуживаются правильно, если я запрошу их вручную.

Я просмотрел документацию и не вижу, чего мне не хватает: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-script/

🤔 А знаете ли вы, что...
С помощью JavaScript можно создавать клиентские приложения для мобильных устройств с использованием фреймворков, таких как React Native и NativeScript.

[РЕШЕНО]Перейти к решению

Javascript273878 вопросов Reactjs73808 вопросов Gatsby1011 вопросов

Ответ:

Решено

Вы пытались установить их в любом другом файле/компоненте, а не в html.js?

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

export default Layout;

Мне кажется, что стратегия добавления его в html.js сталкивается с postBodyComponents (или любыми другими параметрами onRenderBody) и с регидратацией пользовательского html.js

Gatsby Script API не загружает файлы

Ответ:

Интересные вопросы для изучения