盖茨比网站脚本不可用在第一页请求头盔

Question

我有一个Gatsby网站，我试图添加一个第三方js小部件，但由于一些奇怪的原因，它只会加载，如果我手动刷新页面。在第一页加载时，它就像根本不存在一样，在开发工具中没有错误，什么都没有……但如果我刷新页面，它就会出现。就好像是延迟加载一样?有办法强制加载吗?

我已经检查了开发工具中的elements,console和network选项卡，但没有任何错误指示。elements显示了我期望的标签，console根本没有显示，network显示了200。

这可能是盖茨比和/或头盔的问题，它可能是，但我不认为这是小部件本身的问题(它是第三方的，我无法控制它，见最后一段)?

<Helmet
script={[
{
type: 'text/javascript',
src: '//widget-url.com/path/to/jsfile.min.js',
},
{
type: 'text/javascript',
innerHTML: `
(function() {
var widget = Stuff.happens.here();
widget.Initialise();
})();
`,
},
]}
/>

在正文中，我有:

<div id='widget-id'></div>

事情我试图试图了解问题在哪里:

• 如前所述，我必须强制刷新小部件所在的页面。如果我强制刷新任何其他页面，它没有帮助。所以我尝试的是:而不是只包括JS到问题页面的头部，我会把它包括在所有的页面。但这并没有什么不同。

• 我也试过将小部件添加到一个简单的独立html文件中，小部件加载没有问题。这让我认为这可能不是一个小部件的问题?

我不知道从这里要去哪里:(

Answer 1

问题是您指向的DOM元素可能在您请求脚本的那一刻呈现，也可能不呈现。

在你的情况下，我会试着:

<Helmet>
<script async defer src="//widget-url.com/path/to/jsfile.min.js" />
<script async defer>
{`
(function() {
var widget = Stuff.happens.here();
widget.Initialise();
})();   
`}
</script>
</Helmet>

或者使用多个服务器端渲染api之一。onRenderBody应该工作:

// gatsby-ssr.js
import React from "react"
export const onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => {
setHeadComponents([
<script 
src="//widget-url.com/path/to/jsfile.min.js"
type="text/javascript"
async
/>,
<script
dangerouslySetInnerHTML={{
__html: `
(function() {
var widget = Stuff.happens.here();
widget.Initialise();
})();   
`,
}}
/>, 
])
}