Scripts with async in Head are executed twice

[jonkwheeler]

Bug report

Describe the bug

Scripts in the Head are run twice if marked async.

To Reproduce

Steps to reproduce the behavior:

1. Create next app
2. Create file at /static/log.js with console.log('hello'); inside
3. Attach to a page (make sure to add the async attribute)

<NextHead>
  <script src="/static/log.js" async></script>
</NextHead>

4. Run site
5. See duplicate console.log in console.

Expected behavior

Scripts should only run once.

Screenshots

System information

• OS: macOS
• Version of Next.js: latest 9.1.1

[mattjburrows]

I'm very new to nextjs, but this issue peaked my interest.

I've managed to take a quick look at the issue and found that it also happens for script tags with the defer attribute as well.

Testing it out locally, it looks like it happens when the client mounts and the script tag goes from <script src="/logs.js" async=""></script> to <script src="/logs.js" async="true"></script>. Not sure whether React is treating the async attribute as a boolean prop, but not sure how it ends up resolving it to true either.

I tracked it down to this line in the next-server/lib/head.tsx file. Removing the updateHead function from the handleStateChange prop, stopped the double call. I appreciate this wouldn't be a fix, as the updateHead is there for a reason.

Hopefully this little investigation can help track down the true source of the issue.

[developit]

On the client, a NextHead update following initial hydration will change the value of the async prop from "" to true, which will cause the script to be re-executed.

A brute-force fix for this would be to read in the props when invoking cloneElement() on the ReactElements passed as children to NextHead, and coerce async / defer to "" for true, undefined for false:

    .map((c: React.ReactElement<any>, i: number) => {
      const key = c.key || i
      const props = { key }
      if ('async' in c.props) props.async = c.props.async ? '' : undefined
      if ('defer' in c.props) props.defer = c.props.defer ? '' : undefined
      return React.cloneElement(c, props)
    })

This is not a real solution either, but it might help narrow down the issue.

[Timer]

A temporary work around is to probably render this instead:

<script src="/static/log.js" async="async"></script>

[mattjburrows]

A temporary work around is to probably render this instead: <script src="/static/log.js" async="async"></script>

I gave that a try when looking into the issue and that still results in the script been re-executed (I should have mentioned that before).

Again, the script element goes from <script src="/logs.js" async=""></script> to <script src="/logs.js" async="async">.

If you end up going with @developit suggestion, it might be worth taking a look at other boolean attributes for script tags.