analytics script tag is duplicated after using the plugin

When using google analytics script code, the prerendered html in the head looks like:

<script async="" src="https://www.google-analytics.com/analytics.js"></script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

When the page is opened in a browser, it keeps the generated script tag, and the analytics code then when executed it adds another script tag, ending with double script tag

<script async="" src="https://www.google-analytics.com/analytics.js"></script>
<script async="" src="https://www.google-analytics.com/analytics.js"></script>

[DamageESP]

In case this is useful, here’s what I’ve been doing to circunvent this:

I created a file called extraScripts.js, which exports a string with all the extra content I want to be added to each and every rendered page:

extraScripts.js

module.exports = `
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-X"></script>
<script type="text/javascript" src="https://repuso.com/widgets/grid.js" async></script>
<script type="text/javascript">
      var Tawk_API = Tawk_API || {},
        Tawk_LoadStart = new Date();
      (function () {
        var s1 = document.createElement("script"),
          s0 = document.getElementsByTagName("script")[0];
        s1.async = true;
        s1.src = 'https://embed.tawk.to/xxxxxx/default';
        s1.charset = 'UTF-8';
        s1.setAttribute('crossorigin', '*');
        s0.parentNode.insertBefore(s1, s0);
      })();
</script>
<script>
      window.dataLayer = window.dataLayer || []
      function gtag() {
        dataLayer.push(arguments)
      }
      gtag('js', new Date())
      gtag('config', 'UA-XXXXXXX-X')
</script>
`

Then, in webpack.prod.conf.js:

webpack.prod.conf.js

const extraScripts = require('./extraScripts.js')
/* ... */

new PrerenderSPAPlugin({
  // Required - The path to the webpack-outputted app to prerender.
  staticDir: path.join(__dirname, '../dist'),
  // Required - Routes to render.
  routes: ['route1', 'route2'],
  postProcess (context) {
    const bodyEnd = context.html.indexOf('</body>')
    context.html = context.html.substr(0, bodyEnd) + extraScripts + context.html.substr(bodyEnd)

    return context
  }
})
/* ... */

This produces the desired output for me. Of course you can modify the postProcess function to insert whatever string in whatever position in your final HTML.

[DamageESP]

All of my (async) scripts get duplicated upon prerendering. This screws all dynamically rendered content (external iframes, like Analytics, Repuso and Tawk.to in my case, don’t even render at all).

I’m surprised this is not addressed, and is deflected as “out of the scope” of the plugin or vague solutions are provided.

Hope we can shed some light into this and get a consistent solution.