dangerouslySetInnerHTML not working for script tags

[melissafzhang]

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

What is the current behavior? I want to be able to run a script in the helmet on the client. However, react-helmet is removing this script tag.

For example:

<Helmet>
        <script
          type="text/javascript"
          dangerouslySetInnerHTML={{
            __html: 'some code',
          }}
       ></script>
</Helmet>

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:

What is the expected behavior? Do not remove script tags with dangerouslySetInnerHTML

Which versions of React and react-helmet, and which browser / OS are affected by this issue? Did this work in previous versions of React and/or react-helmet? react-helmet: 5.2.0 react: 16.13.0

[traffisco]

Very important feature but no replies.....

[traffisco]

actually, you can use it without dangerouslySetInnerHTML

<script type="text/javascript">
          {`console.log('hey')`}
</script>

[cwelch5]

thanks @traffisco , I was thinking it may have been the dangerouslySetInnerHTML; this could be an issue we can follow up on.

[kb1995]

@cwelch5 Any updates on this bug? I just encountered it and I can't render the script tag coming from my headless CMS

[Mikhail-MM]

Any updates?

[darraghmckay]

If you have a react node but you can't control how it's created, you can at least mutate it before sending it to helmet

The below worked for me, however, there could be a very good reason that you shouldn't do that

const convertDangerousHtmlToChildren = node => {
  if (node.props && node.props.dangerouslySetInnerHTML) {
    return {
      ...node,
      props: {
        ...node.props,
        dangerouslySetInnerHTML: undefined,
        children: node.props.dangerouslySetInnerHTML.__html,
      },
    };
  }
  return node;
};


<Helmet>
        {convertDangerousHtmlToChildren(<script
          type="text/javascript"
          dangerouslySetInnerHTML={{
            __html: 'some code',
          }}
       ></script>)}
</Helmet>