Gatsby使用react-helmet嵌入script表单报解析构建错误

所有报错和GraphQL没有关联，本质是JSX语法解析失败触发的连锁错误：

• JSX语法规则中，标签内部的{}会被识别为表达式插值边界，解析器会将大括号包裹的内容作为JavaScript表达式解析
• 现有代码里写的{var FORMID; ...}中，var FORMID是变量声明语句，不属于合法的JavaScript表达式，直接触发语法错误，导致整个文件编译失败
• Gatsby抛出的GraphQL相关提示是通用兜底报错：只要文件解析流程失败，就会返回该提示，和页面中是否编写GraphQL代码没有关系
• VS Code提示的expression expected警告源于同一个问题：解析器在本该读到表达式的位置遇到了变量声明语句，直接抛出语法提示
• 这段脚本在原生HTML/JS环境可以正常运行，是因为原生HTML不会对script标签内的大括号做特殊语法解析，不会触发解析错误。

两种方案都可以解决问题，可根据项目习惯选择：

方案1：调整内联脚本写法适配JSX规则 #

将整段脚本内容用模板字符串包裹，作为合法的字符串表达式传入script标签，避开JSX对大括号的解析冲突：

<Helmet>
  <script type="text/javascript">
    {`
      var FORMID;
      (function(d, t) {
        var s = d.createElement(t), options = { 'userName':'USERNAME', 'formHash':'FORMID', 'autoResize':true, 'height':'751', 'async':true, 'host':'wufoo.com', 'header':'show', 'ssl':true };
        s.src = ('https:' == d.location.protocol ?'https://':'http://') + 'secure.wufoo.com/scripts/embed/form.js';
        s.onload = s.onreadystatechange = function() {
          var rs = this.readyState;
          if (rs) if (rs != 'complete') if (rs != 'loaded') return;
          try {
            FORMID = new WufooForm();
            FORMID.initialize(options);
            FORMID.display();
          } catch (e) { }
        };
        var scr = d.getElementsByTagName(t)[0], par = scr.parentNode;
        par.insertBefore(s, scr);
      })(document, 'script');
    `}
  </script>
</Helmet>

该写法和原生嵌入脚本的逻辑完全一致，JSX会将模板字符串的内容作为script标签的文本内容正常注入页面。

方案2：在组件生命周期中加载脚本（React推荐写法） #

不通过react-helmet注入内联脚本，在组件挂载完成后执行脚本加载逻辑，完全避开JSX解析脚本的语法冲突，还可以方便地做资源清理：

import { useEffect } from 'react';
// 其余组件导入保持不变

const FormPage = () => {
  useEffect(() => {
    let FORMID;
    (function(d, t) {
      var s = d.createElement(t), options = { 'userName':'USERNAME', 'formHash':'FORMID', 'autoResize':true, 'height':'751', 'async':true, 'host':'wufoo.com', 'header':'show', 'ssl':true };
      s.src = ('https:' == d.location.protocol ?'https://':'http://') + 'secure.wufoo.com/scripts/embed/form.js';
      s.onload = s.onreadystatechange = function() {
        var rs = this.readyState;
        if (rs) if (rs != 'complete') if (rs != 'loaded') return;
        try {
          FORMID = new WufooForm();
          FORMID.initialize(options);
          FORMID.display();
        } catch (e) { }
      };
      var scr = d.getElementsByTagName(t)[0], par = scr.parentNode;
      par.insertBefore(s, scr);
    })(document, 'script');

    // 组件卸载时清理注入的脚本，避免重复加载和内存泄漏
    return () => {
      const wufooScript = document.querySelector('script[src*="secure.wufoo.com/scripts/embed/form.js"]');
      if (wufooScript) wufooScript.remove();
    }
  }, []);

  return (
    <div>
      {/* 页面原有内容 */}
      {/* 预留Wufoo表单挂载容器，容器ID和表单hash保持一致即可 */}
      <div id="wufoo-FORMID"></div>
    </div>
  )
}

export default FormPage;

• 两种方案都需要将代码中全大写的USERNAME、FORMID占位符替换为Wufoo后台实际的用户名和表单ID
• 使用方案2时，确认Wufoo表单默认挂载的容器ID和页面中预留的容器ID匹配，避免表单无法正常渲染。

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