NextJS 头部中的 HubSpot 表单脚本

Question

I'm trying to add the following script to my NextJS Head:我正在尝试将以下脚本添加到我的 NextJS Head 中：

<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "XXXXXX",
    formId: "XXXXXX"
});
</script>

Then it gives me two errors:然后它给了我两个错误：

Error 1: Unexpected token.错误 1：意外的令牌。 Did you mean {'}'} or }你的意思是{'}'}还是} ?ts(1381) (for closing bracket) ?ts(1381)（用于右括号）

Error 2: Syntax error: Unexpected token, expected "}" (for the line "region: "na1")错误 2：语法错误：意外标记，预期为“}”（对于“区域：”行“na1”）

This is the whole indes.jsx file:这是整个 indes.jsx 文件：

import Head from "next/head";
import styled from "styled-components";
import HeroSection from "../components/sections/HeroSection";
import OverviewSection from "../components/sections/OverviewSection";

const Wrapper = styled.div`
  margin-top: 10rem;
`;

export default function HomePage() {
  return (
    <Wrapper>
      <Head>
        <title>Code Shape - Home</title>
        <link rel="icon" href="/favicon.ico" />
        <script
          type="text/javascript"
          id="hs-script-loader"
          async
          defer
          src="//js.hs-scripts.com/8205013.js"
        ></script>
        <script
          charset="utf-8"
          type="text/javascript"
          src="//js.hsforms.net/forms/shell.js"
        ></script>
        <script>
          hbspt.forms.create(
          {
            region: "na1",
            portalId: "XXXXXX",
            formId: "XXXXXX",
          }
          );
        </script>
      </Head>
      <HeroSection />
    </Wrapper>
  );
}

The script is coming from HubSpot when generating the form, so I assumed the script code is right.生成表单时脚本来自 HubSpot，所以我认为脚本代码是正确的。

Answer 1

The code is getting escaped, try and wrap it into the dangerouslySetInnerHTML property:代码被转义，尝试将其包装到 dangerouslySetInnerHTML 属性中：

  <Head>
    <script dangerouslySetInnerHTML={{ __html: `
       hbspt.forms.create({
           region: "na1",
           portalId: "XXXXXX",
           formId: "XXXXXX"
       });
     `}} />
  </Head>

NextJS 头部中的 HubSpot 表单脚本

问题描述

1 个解决方案

解决方案1
1 2021-04-29 06:29:29

NextJS 头部中的 HubSpot 表单脚本

问题描述

1 个解决方案

解决方案1 1 2021-04-29 06:29:29

解决方案1
1 2021-04-29 06:29:29