React / JSX: Rendered <script> Tag Adds Equals Sign and Quotes to async Attribute

user_4451284 0
Viewed 151

I made a simple web app with Next.js / React. One of the functional components (Next.js "page") returns some JSX that includes a tag like

<script async src="https://example.com/file.js"></script>

However, when I look at the page source of the rendered page, I see the async is instead rendered as async="". Is there a way to force the attribute/tag to be rendered verbatim instead of adding the equals sign and quotation marks? Either for this particular tag, or in general?

Edit: Here is a minimal JSFiddle which shows the undesirable behavior: https://jsfiddle.net/1vbnms3j/ . This is evidently just a React / JSX issue, unrelated to Next.js. I have tried solutions such as https://github.com/facebook/react/issues/9230#issuecomment-388118729, but none of async='', async={true}, async={undefined} seem to work. Also doesn't make a difference whether I use <script></script> or <script />.

jsx next.js reactjs html
1 Answers

Here is an ugly solution that works:

<script dangerouslySetInnerHTML={{ __html: `</script><script async src="https://example.com/file.js"></script><script>`,}}/>

This renders my tag correctly (the async attribute is displayed correctly and in the right position), but generates unnecessary <script></script> before and after my tag (although those are mostly harmless).

I'd still like a cleaner solution that does not generate unnecessary tags, if possible.

user_44512840
Related