Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
adstr123 opened this issue Sep 22, 2021 · 2 comments
Open

Comments

@adstr123
Copy link

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",
@aliceathens
Copy link

+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')

@Droow
Copy link

Droow commented Mar 1, 2022

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> tag inside the JSX. So the problematic line here is this one:

<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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants