<p dir="auto">Hi there,<br>
The first, sorry for my English.</p>
<h1 dir="auto">Examples bug report</h1>
<p dir="auto"><strong>In pages/index.js:</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React from 'react';
import Link from 'next/link';

class Index extends React.Component {
  render() {
    return(
      &lt;div&gt;
	&lt;Link href='/about'&gt;
          &lt;a href=&quot;&quot;&gt; Go to about &lt;/a&gt;
       &lt;/Link&gt;
     &lt;/div&gt;
   )
  }
}
export default Index;"><pre class="notranslate"><code class="notranslate">import React from 'react';
import Link from 'next/link';

class Index extends React.Component {
  render() {
    return(
      &lt;div&gt;
	&lt;Link href='/about'&gt;
          &lt;a href=""&gt; Go to about &lt;/a&gt;
       &lt;/Link&gt;
     &lt;/div&gt;
   )
  }
}
export default Index;
</code></pre></div>
<p dir="auto">===================================<br>
<strong>In pages/about.js</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React from 'react';
import Link from 'next/link';
import Head from 'next/head';

class About extends React.Component {
  render() {
	return(
	  &lt;div&gt;
		&lt;Head&gt;
		  &lt;script async src='/static/xxx.js'&gt;&lt;/script&gt;
		&lt;/Head&gt;
		&lt;Link href='/'&gt;
                  &lt;a className='example' href=&quot;&quot;&gt; go back &lt;/a&gt;
               &lt;/Link&gt;

               &lt;button  id='button'  type='button'&gt;Click me&lt;/button&gt;
	  &lt;/div&gt;
	)
  }
}
export default About;"><pre class="notranslate"><code class="notranslate">import React from 'react';
import Link from 'next/link';
import Head from 'next/head';

class About extends React.Component {
  render() {
	return(
	  &lt;div&gt;
		&lt;Head&gt;
		  &lt;script async src='/static/xxx.js'&gt;&lt;/script&gt;
		&lt;/Head&gt;
		&lt;Link href='/'&gt;
                  &lt;a className='example' href=""&gt; go back &lt;/a&gt;
               &lt;/Link&gt;

               &lt;button  id='button'  type='button'&gt;Click me&lt;/button&gt;
	  &lt;/div&gt;
	)
  }
}
export default About;
</code></pre></div>
<p dir="auto">=============================================<br>
In pages/about.js, i'm embed   &lt;script async src='/static/xxx.js'&gt;&lt;/script&gt; within  component of Nextjs.<br>
<strong>xxx.js content:</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="console.log('xxx');
document.getElementById('button').addEventListener('click', function () {
  console.log('clicked');
})"><pre class="notranslate"><code class="notranslate">console.log('xxx');
document.getElementById('button').addEventListener('click', function () {
  console.log('clicked');
})
</code></pre></div>
<p dir="auto">=============================================</p>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">after that, in browser enter url localhost:port/about and then enable console i seen 'xxx' in console but is duplicated. So, when click to button element, console show two times 'clicked'.<br>
When embeb xxx.js, if don't have async attribute, this does not happen but document.getElementById('button') is not found coz js loaded before element rendered.<br>
I don't understand about async attribute in nextjs. If have "async" attribute, in Web Console -&gt; Network tab, <strong>xxx.js</strong> loaded two times, else <strong>xxx.js</strong> loaded one time.</p>
<p dir="auto">Please tell me why this bug appeared</p>
<p dir="auto">Many thanks!</p>
<h2 dir="auto">To Reproduce</h2>
<ol dir="auto">
<li>Go to Browser</li>
<li>Enter url: localhost:port/about and hit Enter</li>
<li>Click in to "Click me" button</li>
<li>F12 find console tab</li>
<li>See error: duplicated text "clicked"</li>
</ol>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">Just have one text: "clicked" in Console tab when click to button.</p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: macOS</li>
<li>Browser: safari</li>
<li>Version of Next.js: "^7.0.2"</li>
</ul>
<p dir="auto">Based on the <a href="https://github.com/zeit/next.js/wiki/Deployment#hot-fix">guide in the wiki</a> I assumed it would be safe to override the build id by changing that file. However, any use of dynamic imports <code class="notranslate">import('.../....')</code> will still use the old build id, which is hardcoded in the generated webpack bundle.</p>
<p dir="auto">This results in a 404.</p>
<p dir="auto">One solution might be to allow overriding the buildId at build time instead of afterwards:</p>
<p dir="auto"><a href="https://github.com/zeit/next.js/blob/52ccc14059673508803f96ef1c74eecdf27fe096/server/build/index.js#L10-L31">https://github.com/zeit/next.js/blob/52ccc14059673508803f96ef1c74eecdf27fe096/server/build/index.js#L10-L31</a></p>


<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>3.0.6</td>
</tr>
<tr>
<td>node</td>
<td>7.10</td>
</tr>
<tr>
<td>OS</td>
<td>Mac OS X</td>
</tr>
<tr>
<td>browser</td>
<td>All</td>
</tr>
</tbody>
</table>