How can I ignore TypeScript errors when adding script tags via react-helmet?

The following tsx code generates TypeScript errors. //@ts-ignore doesn't work.

<Helmet>
  <script>
    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-*******');
  </script>
</Helmet>

The following code works, but I would like to use a child <script> tag vs the script component property.

<Helmet
  script={[
    {
      type: 'application/javascript',
      innerHTML: '(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({\'gtm.start\':new Date().getTime(),event:\'gtm.js\'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!=\'dataLayer\'?\'&l=\'+l:\'\';j.async=true;j.src=\'https://www.googletagmanager.com/gtm.js?id=\'+i+dl;f.parentNode.insertBefore(j,f);})(window,document,\'script\',\'dataLayer\',\'GTM-*******\');'
    }
  ]}
/>

Does this script have to be embedded as part of your Component heap?

I faced a similar issue when using YouTube's iframe API and the solution was to create the script element and reference the javascript objects created once they exist (if you need to do that, looks like you literally just want to import some JS). I didn't need to create a react component for this unless there were visual elements I wanted to manage.

// GoogleTagManager.ts

export class GoogleTagManager {
  someVariable: someVariableType = null 

  constructor () {
    const script: HTMLScriptElement = <HTMLScriptElement>document.createElement('script')

    script.src = '[URL_TO_JS_FILE]'

    script.onload = (): void => console.log('loaded google tag manager')

    document.body.appendChild(script)
  }

  WaitForVariable (): void {
    let timeout: number

    const OnTimeout = (): void => {
      if (timeout) {
        clearTimeout(timeout)
      }

      if (typeof [TARGET_VARIABLE] !== 'undefined') {
        this.someVariable = [TARGET_VARIABLE]
        return
      }

      timeout = setTimeout(OnTimeout, 1000)
    }
  }
}

If you want to display some information then you could turn this into a React Component and move the constructor logic to componentDidMount. Alternatively I would consider sending any resultant data to a store and having a separate component for rendering the resultant data.

nfl/react-helmet: A document head manager for React, Supports all valid head tags: title , base , meta , link , script , noscript , and style tags. Supports attributes for body , html and title tags. Supports server-side  Next, rename any file to be a TypeScript file (e.g. src/index.js to src/index.tsx) and restart your development server! Type errors will show up in the same console as the build one. You'll have to fix these type errors before you continue development or build your project. For advanced configuration, see here. #Getting Started with TypeScript


Figured it out thanks to https://github.com/nfl/react-helmet/issues/334#issuecomment-413319383.

<Helmet>
  <script>
    {`
      alert('BOOM');
    `} 
  </script>
</Helmet>

"Ignore this error message" code fix in JSX results in rendering , DanielRosenwasser added this to the TypeScript 3.2 milestone on Oct 8, eslint-​disable-line react/jsx-tag-spacing // @ts-ignore Component/>  Brandon. Apparently, this user prefers to keep an air of mystery about them. View all tags → -1 How can I ignore TypeScript errors when adding script tags


With caution, you can use dangerouslySetInnerHTML like so:

<script
  dangerouslySetInnerHTML={{
    __html: `
    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-*******');
`,
  }}
/>

But be careful of cross-site scripting (XSS) attacks.

Async loading script within react component - reactjs - html, How can I ignore TypeScript errors when adding script tags via react-helmet? The following tsx code generates TypeScript errors. //#ts-ignore doesn't work. Parsing errors can't be ignored when using tsc for type checking. Not by using @ts-ignore not by using @ts-nocheck. Once you use non-standard syntax in .ts/.tsx files, you can't type check them on the CLI via tsc anymore. For some reason it still works fine in VSCode. ESLint does not know about TypeScript globals.


The React Handbook, The simplest one is to add the React JavaScript file into the page In this case, you add 2 script tags to the end of the body tag: How do you handle errors with callbacks? The state is passed down to the components that need that value via require('ignore-styles') require('@babel/register')({ ignore:  Once the dependencies are installed, we can add gatsby-plugin-typescript to the gatsby-config.js file (lines 69 – 71). gatsby-plugin-offline, gatsby-plugin-react-helmet, gatsby-plugin-typescript, Next, add .eslintrc.js and tsconfig.json to the root directory of the codebase.


Using Client-Side Only Packages, to clipboard. Reference error: Window is not Defined Workaround 2: Add client-side package via CDN. In the component Include it in a custom component as needed using react-helmet . Add the script tag directly in your base HTML using Gatsby's html.js TypeScript · Debugging Gatsby · Adding  If you’re developing web applications, you might run into a situation where you include a JavaScript library via a <script> tag that doesn’t play nice in your TypeScript code. Let’s create a new project somewhere on our computer.


Fullstack React: Declaratively loading JavaScript, The practice of placing our CSS scripts in the <head> tag and our JS at the end of These older browsers will just ignore the attribute and block the script loading document body and handling both any errors that may arise from a script load  For example, you can use React Helmet to set the title, description and meta tags for the document. It comes-in especially handy when combined with server-side rendering because it allows to set meta tags that will be read by search engines and social media crawlers.