在Gatsby中向head插入JS代码时遭遇表达式错误求助

问题原因 #

在Gatsby（基于React）的JSX语法中，<script>标签内部的代码会被JSX解析器当作表达式处理，而非纯文本。你直接写入的自执行函数和变量声明不符合JSX的解析规则，因此触发语法错误。

解决方案 #

使用React提供的dangerouslySetInnerHTML属性，将脚本代码作为纯字符串传入，避免JSX解析器干预：

import Helmet from 'react-helmet';

// 在组件中使用
<Helmet>
  <script
    dangerouslySetInnerHTML={{
      __html: `
        var _paq = window._paq = window._paq || [];
        _paq.push(["disableCookies"]);
        _paq.push(['trackPageView']);
        _paq.push(['enableLinkTracking']);
        (function() {
          var u="SITELINK"; // 替换为你的Matomo站点地址
          _paq.push(['setTrackerUrl', u+'matomo.php']);
          _paq.push(['setSiteId', 'SITEID']); // 替换为你的站点ID
          var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
          g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
        })();
      `
    }}
  />
</Helmet>

替代方案（静态脚本） #

如果你的Matomo脚本不需要动态替换参数，可以将代码保存为单独的.js文件，放在Gatsby的static目录下，然后通过src属性引入：

<Helmet>
  <script src="/matomo.js" async />
</Helmet>

注意事项 #

• 使用dangerouslySetInnerHTML时，确保脚本来源安全，避免XSS攻击风险；
• 务必将代码中的SITELINK和SITEID替换为实际的Matomo服务地址和站点ID。

内容的提问来源于stack exchange，提问作者Prithviraj Mitra