使用Gatsby Head API与TypeScript时脚本格式化及编译异常问题

问题现象 #

1. 基础脚本可运行但VS Code无法识别语法：
   现有代码能正常修改页面标题、执行console.log，但VS Code将<script>标签内的JS代码识别为纯文本，无法进行语法格式化。
2. 复杂自执行脚本编译失败：
   在Head中添加自执行函数的<script>后，Gatsby编译报错，同时VS Code中代码标红，无法识别函数声明语法。

解决方案 #

针对VS Code语法识别问题 #

使用React的dangerouslySetInnerHTML属性注入脚本内容，让编辑器正确识别内部JS语法：

const Page = ({ location }) => {
  // 页面逻辑代码
  return (/* 页面内容 */)
}

export const Head = () => {
  return (
    <>
      <title>Example</title>
      <script dangerouslySetInnerHTML={{ __html: `console.log("hello");` }} />
    </>
  )
}

针对复杂脚本编译失败问题 #

同样用dangerouslySetInnerHTML包裹脚本内容，将复杂脚本定义为模板字符串，避免JSX解析器误判：

const Page = ({ location }) => {
  // 页面逻辑代码
  return (/* 页面内容 */)
}

export const Head = () => {
  const selfExecutingScript = `
    (function(w, d, s) {
      // 此处填写你的脚本内容
      console.log("自执行函数运行");
    })(window, document, "script");
  `;

  return (
    <>
      <title>Example</title>
      <script dangerouslySetInnerHTML={{ __html: selfExecutingScript }} />
    </>
  )
}

说明 #

• JSX中直接在<script>标签内写代码会被当作普通字符串处理，既无法触发编辑器的JS语法支持，还可能因特殊语法（如{}）触发解析错误。
• dangerouslySetInnerHTML是Gatsby/React中插入原始HTML/JS的标准方式，使用时需确保脚本内容安全，避免XSS风险。

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