<h1 dir="auto">Bug report</h1>
<p dir="auto">When you build next.js when the index page is located in <code class="notranslate">/index/index.js</code> instead of <code class="notranslate">/index.js</code> The client side script will not be executed when you access <code class="notranslate">http://localhost/</code>.</p>
<p dir="auto">The built index page will register with <code class="notranslate">/index</code> (as shown below)</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="(window.__NEXT_P = window.__NEXT_P || []).push([&quot;/index&quot;, function () {
  var e = n(&quot;gDgk&quot;);
  return {
    page: e.default || e
  }
}])"><pre class="notranslate"><span class="pl-kos">(</span><span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">__NEXT_P</span> <span class="pl-c1">=</span> <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">__NEXT_P</span> <span class="pl-c1">||</span> <span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-s">"/index"</span><span class="pl-kos">,</span> <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">var</span> <span class="pl-s1">e</span> <span class="pl-c1">=</span> <span class="pl-en">n</span><span class="pl-kos">(</span><span class="pl-s">"gDgk"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">return</span> <span class="pl-kos">{</span>
    <span class="pl-c1">page</span>: <span class="pl-s1">e</span><span class="pl-kos">.</span><span class="pl-c1">default</span> <span class="pl-c1">||</span> <span class="pl-s1">e</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">]</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">Moving the index.js to the pages root will restore the wanted behaviour.<br>
It took a while for me to figure out what the actual issue is as it's working just fine in dev mode.</p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">Steps to reproduce the behavior, please provide code snippets or a repository:</p>
<ol dir="auto">
<li>Check out <a href="https://github.com/adlk/nextjs-index-issue">https://github.com/adlk/nextjs-index-issue</a></li>
<li>Run <code class="notranslate">npm install &amp;&amp; npm run build &amp;&amp; npm start</code></li>
<li>Check in DevTools if you have a log with <code class="notranslate">Home: component did mount</code></li>
</ol>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>Version of Next.js: 8.0.0</li>
</ul>
<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?q=is%3Aissue">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">Components lose all references when staticly exporting the app</p>
<h2 dir="auto">Context</h2>
<p dir="auto">In my project i have multiple components which use refs to determine dom-specific stuff (e.g. height of elements), they work as expected when building for production and running next. I intend to use the static export of the app. When i run the exported build on my server (apache), all refs that should be populated, are set to null. i also tried to wrap these components with <code class="notranslate">react-no-ssr</code> to no avail.</p>
<p dir="auto"><strong>One of my Components which produce this behaviour</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React,{Component} from 'react'
import ReactDOM from 'react-dom'

function isElementInViewport (el) {

	const rect = el.getBoundingClientRect();

	return (
		rect.top &gt;= 0 &amp;&amp;
		rect.left &gt;= 0 &amp;&amp;
		rect.bottom &lt;= (window.innerHeight || document.documentElement.clientHeight) &amp;&amp;
		rect.right &lt;= (window.innerWidth || document.documentElement.clientWidth)
	);
}

export default class Runningback extends Component {
	state = {visible:false}

	componentDidMount(){
		window.addEventListener('scroll',this.handleScroll,false);
		this.handleScroll();
	}
	componentWillUnmount(){
		window.removeEventListener('scroll',this.handleScroll);
	}

	handleScroll = ()=&gt;{
		const el = ReactDOM.findDOMNode(this.refs[0]);
		if(!el) return;
		const visible = isElementInViewport(el);
		const {both=false} = this.props;
		if(this.state.visible !== visible &amp;&amp; (visible || both)){
			// console.log(`el switched ${visible?'visible':'invisible'}`);
			this.setState({visible});
		}
	}
	render(){
		const {children} = this.props;
		const {visible} = this.state;
		if(typeof(children) !== 'function') throw new Error('expects a function as children-prop');
			
		return React.Children.map(children(visible),(child,index)=&gt;{
			//debugger;
			return &lt;child.type {...child.props} ref={index} /&gt;;
		});
	}
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span><span class="pl-kos">,</span><span class="pl-kos">{</span><span class="pl-v">Component</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span>
<span class="pl-k">import</span> <span class="pl-v">ReactDOM</span> <span class="pl-k">from</span> <span class="pl-s">'react-dom'</span>

<span class="pl-k">function</span> <span class="pl-en">isElementInViewport</span> <span class="pl-kos">(</span><span class="pl-s1">el</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>

	<span class="pl-k">const</span> <span class="pl-s1">rect</span> <span class="pl-c1">=</span> <span class="pl-s1">el</span><span class="pl-kos">.</span><span class="pl-en">getBoundingClientRect</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

	<span class="pl-k">return</span> <span class="pl-kos">(</span>
		<span class="pl-s1">rect</span><span class="pl-kos">.</span><span class="pl-c1">top</span> <span class="pl-c1">&gt;=</span> <span class="pl-c1">0</span> <span class="pl-c1">&amp;&amp;</span>
		<span class="pl-s1">rect</span><span class="pl-kos">.</span><span class="pl-c1">left</span> <span class="pl-c1">&gt;=</span> <span class="pl-c1">0</span> <span class="pl-c1">&amp;&amp;</span>
		<span class="pl-s1">rect</span><span class="pl-kos">.</span><span class="pl-c1">bottom</span> <span class="pl-c1">&lt;=</span> <span class="pl-kos">(</span><span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">innerHeight</span> <span class="pl-c1">||</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-c1">documentElement</span><span class="pl-kos">.</span><span class="pl-c1">clientHeight</span><span class="pl-kos">)</span> <span class="pl-c1">&amp;&amp;</span>
		<span class="pl-s1">rect</span><span class="pl-kos">.</span><span class="pl-c1">right</span> <span class="pl-c1">&lt;=</span> <span class="pl-kos">(</span><span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">innerWidth</span> <span class="pl-c1">||</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-c1">documentElement</span><span class="pl-kos">.</span><span class="pl-c1">clientWidth</span><span class="pl-kos">)</span>
	<span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">class</span> <span class="pl-v">Runningback</span> <span class="pl-k">extends</span> <span class="pl-v">Component</span> <span class="pl-kos">{</span>
	<span class="pl-c1">state</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-c1">visible</span>:<span class="pl-c1">false</span><span class="pl-kos">}</span>

	<span class="pl-en">componentDidMount</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
		<span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-en">addEventListener</span><span class="pl-kos">(</span><span class="pl-s">'scroll'</span><span class="pl-kos">,</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">handleScroll</span><span class="pl-kos">,</span><span class="pl-c1">false</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
		<span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">handleScroll</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
	<span class="pl-kos">}</span>
	<span class="pl-en">componentWillUnmount</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
		<span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-en">removeEventListener</span><span class="pl-kos">(</span><span class="pl-s">'scroll'</span><span class="pl-kos">,</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">handleScroll</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
	<span class="pl-kos">}</span>

	<span class="pl-c1">handleScroll</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-c1">=&gt;</span><span class="pl-kos">{</span>
		<span class="pl-k">const</span> <span class="pl-s1">el</span> <span class="pl-c1">=</span> <span class="pl-v">ReactDOM</span><span class="pl-kos">.</span><span class="pl-en">findDOMNode</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">refs</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
		<span class="pl-k">if</span><span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">el</span><span class="pl-kos">)</span> <span class="pl-k">return</span><span class="pl-kos">;</span>
		<span class="pl-k">const</span> <span class="pl-s1">visible</span> <span class="pl-c1">=</span> <span class="pl-en">isElementInViewport</span><span class="pl-kos">(</span><span class="pl-s1">el</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
		<span class="pl-k">const</span> <span class="pl-kos">{</span>both<span class="pl-c1">=</span><span class="pl-c1">false</span><span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">;</span>
		<span class="pl-k">if</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">visible</span> <span class="pl-c1">!==</span> <span class="pl-s1">visible</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-kos">(</span><span class="pl-s1">visible</span> <span class="pl-c1">||</span> <span class="pl-s1">both</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
			<span class="pl-c">// console.log(`el switched ${visible?'visible':'invisible'}`);</span>
			<span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">setState</span><span class="pl-kos">(</span><span class="pl-kos">{</span>visible<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
		<span class="pl-kos">}</span>
	<span class="pl-kos">}</span>
	<span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
		<span class="pl-k">const</span> <span class="pl-kos">{</span>children<span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">;</span>
		<span class="pl-k">const</span> <span class="pl-kos">{</span>visible<span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">;</span>
		<span class="pl-k">if</span><span class="pl-kos">(</span><span class="pl-k">typeof</span><span class="pl-kos">(</span><span class="pl-s1">children</span><span class="pl-kos">)</span> <span class="pl-c1">!==</span> <span class="pl-s">'function'</span><span class="pl-kos">)</span> <span class="pl-k">throw</span> <span class="pl-k">new</span> <span class="pl-v">Error</span><span class="pl-kos">(</span><span class="pl-s">'expects a function as children-prop'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
			
		<span class="pl-k">return</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">Children</span><span class="pl-kos">.</span><span class="pl-en">map</span><span class="pl-kos">(</span><span class="pl-en">children</span><span class="pl-kos">(</span><span class="pl-s1">visible</span><span class="pl-kos">)</span><span class="pl-kos">,</span><span class="pl-kos">(</span><span class="pl-s1">child</span><span class="pl-kos">,</span><span class="pl-s1">index</span><span class="pl-kos">)</span><span class="pl-c1">=&gt;</span><span class="pl-kos">{</span>
			<span class="pl-c">//debugger;</span>
			<span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-s1">child</span><span class="pl-kos">.</span><span class="pl-s1">type</span> <span class="pl-kos">{</span>...<span class="pl-s1">child</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">}</span> <span class="pl-c1">ref</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">index</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>
		<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
	<span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<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>v5.0.1-canary.11</td>
</tr>
<tr>
<td>node</td>
<td>v9.1.0</td>
</tr>
<tr>
<td>OS</td>
<td>macOS High Sierra</td>
</tr>
<tr>
<td>browser</td>
<td>Google Chrome</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>