Я пытаюсь импортировать собственный скрипт в Gatsby JS. Я использую файл html.js, чтобы связать четыре сценария, которые находятся в моей папке stati c. Один сценарий находится в заголовке, а три других - после компонентов тела.
import React from 'react';
import PropTypes from 'prop-types';
import { withPrefix } from 'gatsby';
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}
<script src={withPrefix('/js/vendor/modernizr-custom.js')} />
</head>
<body {...props.bodyAttributes}>
{props.preBodyComponents}
<div
key={`body`}
id="___gatsby"
dangerouslySetInnerHTML={{ __html: props.body }}
/>
<script src={withPrefix('/js/compressed.js')} />
<script src={withPrefix('/js/main.js')} />
<script src={withPrefix('/js/smart-forms.min.js')} />
{props.postBodyComponents}
</body>
</html>
);
}
HTML.propTypes = {
htmlAttributes: PropTypes.object,
headComponents: PropTypes.array,
bodyAttributes: PropTypes.object,
preBodyComponents: PropTypes.array,
body: PropTypes.string,
postBodyComponents: PropTypes.array,
};
Один из этих сценариев загружается в jQuery. Проблема в том, что эти скрипты загружаются некорректно. Иногда они загружаются, и веб-сайт работает нормально, а иногда они вообще не загружаются и работают только после обновления веб-сайта несколько раз. Другие сценарии зависят от jquery, поскольку они используют jquery.
Что я делаю не так и как мне заставить их загружаться в 100% случаев?