Gatsby 网站，使用头盔请求第一页时脚本不可用

Question

我有一个 Gatsby 网站，我正在尝试向其添加 third-party js 小部件，但由于某些奇怪的原因，它只会在我手动刷新页面时加载。在第一页加载时，它就好像它根本不存在一样，dev-tools 中没有错误，什么都没有......但是如果我刷新页面，它就会出现。这几乎就像是延迟加载？有没有办法强制加载？

我检查了开发工具中的 elements、console 和 network 选项卡，但没有任何迹象表明有任何错误。 elements 显示了我期望的标签，console 什么也没显示，network 一切都显示了 200。

这可能是 Gatsby and/or 头盔的问题，可能是，但我认为这不是小部件本身的问题（它是 third-party，我无法控制它，见最后一段）？

<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();
                })();
            `,
        },
    ]}
/>

在 body 然后我有：

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

我试图了解问题所在的事情：

正如我提到的，我必须强制刷新小部件所在的页面。如果我强制刷新任何其他页面，它没有帮助。所以我尝试的是：我不是只将 JS 包含到相关页面的头部，而是将它包含在所有页面上。但这并没有什么不同。
我也试过将小部件添加到一个简单的 stand-alone 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();
        })();   
     `,
    }}
   />, 
 ])
}

Gatsby 网站，使用头盔请求第一页时脚本不可用

Gatsby site, Script not available on first page request with Helmet

javascript

helmet.js

gatsby