Q: 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-*******\');'
    }
  ]}
/>


A: Figured it out thanks to https://github.com/nfl/react-helmet/issues/334#issuecomment-413319383.
<Helmet>
  <script>
    {`
      alert('BOOM');
    `} 
  </script>
</Helmet>


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

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