react-helmet Unexpected end of input when appending <script></script> tags to head

Do you want to request a feature or report a bug? Report a bug

What is the current behavior? When running in development environment (gatsby develop), on each page load I get:

Error in function eval in ./node_modules/react-helmet/es/Helmet.js:512

Unexpected end of input

./node_modules/react-helmet/es/Helmet.js:512

   511 |     newTags.forEach(function (tag) {
 > 512 |         return headElement.appendChild(tag);
   513 |     });

This does not happen in production (gatsby build)
I am able to simply close the window and as far as I can tell, react-helmet is still injecting everything I need it to.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React and react-helmet. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below: Can provide later, checking if anyone spots an obvious error for now. Below is the contents of the react-helmet portion of my seo.js component.

    <Helmet
      title={props.pageTitle ? `${props.pageTitle} | ${siteTitle}` : siteTitle}
    >
      {/* OneTrust Cookies Consent Notice start */}
      <script
        src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js"
        type="text/javascript"
        charset="UTF-8"
        data-domain-script="[redacted]"
      ></script>
      <script type="text/javascript">function OptanonWrapper() {}</script>
      {/* OneTrust Cookies Consent Notice end */}
      <meta
        name="description"
        content={
          props.siteDescription ? props.siteDescription : siteDescription
        }
      />
      <meta property="og:url" content="[redacted]" />
      <meta
        property="og:title"
        content={
          props.pageTitle ? `${props.pageTitle} | ${siteTitle}` : siteTitle
        }
      />
      <meta
        property="og:description"
        content={
          props.siteDescription ? props.siteDescription : siteDescription
        }
      />
      <meta property="og:type" content="website" />
      {socialSharingImage && (
        <meta property="og:image" content={socialSharingImage.original.src} />
      )}
      <html lang="en-GB" />
    </Helmet>

Output of gatsby info:

  System:
    OS: macOS 11.5
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
    npm: 7.24.0 - ~/.nvm/versions/node/v14.16.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 93.0.4577.82
    Safari: 14.1.2
  npmPackages:
    gatsby: ^3.14.0 => 3.14.0
    gatsby-plugin-gatsby-cloud: ^3.2.0 => 3.2.0
    gatsby-plugin-google-tagmanager: ^3.14.0 => 3.14.0
    gatsby-plugin-image: ^1.14.0 => 1.14.0
    gatsby-plugin-manifest: ^3.14.0 => 3.14.0
    gatsby-plugin-offline: ^4.14.0 => 4.14.0
    gatsby-plugin-react-helmet: ^4.14.0 => 4.14.0
    gatsby-plugin-react-svg: ^3.0.1 => 3.0.1
    gatsby-plugin-sass: ^4.14.0 => 4.14.0
    gatsby-plugin-sharp: ^3.14.0 => 3.14.0
    gatsby-plugin-sitemap: ^4.10.0 => 4.10.0
    gatsby-plugin-styled-components: ^4.14.0 => 4.14.0
    gatsby-plugin-transition-link: ^1.20.5 => 1.20.5
    gatsby-source-contentful: ^5.14.0 => 5.14.0
    gatsby-source-filesystem: ^3.14.0 => 3.14.0
    gatsby-transformer-remark: ^4.11.0 => 4.11.0
    gatsby-transformer-sharp: ^3.14.0 => 3.14.0
  npmGlobalPackages:
    gatsby-cli: 3.14.0

Also relevant:

    "react": "^17.0.2",
    "react-helmet": "^6.1.0",

Sep 22 '21 11:09 adstr123

+1 having the same issue trying to use Helemt to add OneTrust to the Head. @adstr123 do you also get the following console error related to otSDKStub.js : Uncaught TypeError: Cannot read properties of null (reading 'getAttribute')

Sep 27 '21 10:09 aliceathens

For anyone interested, I also had this issue.

After some research, I found out, that it is probably not related to react helmet. Appearently it is caused by using inline JS inside the

<script type="text/javascript">function OptanonWrapper() {}</script>

I just simply changed it to

<script type="text/javascript">{`function OptanonWrapper() {}`}</script>

and the error is gone. Another solution would be:

<script
  type="text/javascript"
  dangerouslySetInnerHTML={{ 
     __html: 'function OptanonWrapper() {}'
}} />

Hope it helps.

Mar 01 '22 15:03 Droow

react-helmet react-helmet copied to clipboard

Unexpected end of input when appending <script></script> tags to head

react-helmet
react-helmet copied to clipboard