<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">Expected Behavior</h2>


<p dir="auto">npm install next should work without any errors</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">When running npm install next I get the following error</p>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="$ npm install --save next

npm WARN deprecated npmconf@2.1.2: this package has been reintegrated into npm and is now out of date with respect to npm
npm WARN deprecated @semantic-release/last-release-npm@2.0.2: Use @semantic-release/npm instead
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: timed-out@^4.0.1 (node_modules/got/node_modules/timed-out):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: No valid versions available for timed-out

npm ERR! code ENOVERSIONS
npm ERR! No valid versions available for duplexer3

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/sgore/.npm/_logs/2018-01-06T19_02_46_815Z-debug.log
"><pre class="notranslate">$ npm install --save next

npm WARN deprecated npmconf@2.1.2: this package has been reintegrated into npm and is now out of date with respect to npm
npm WARN deprecated @semantic-release/last-release-npm@2.0.2: Use @semantic-release/npm instead
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: timed-out@^4.0.1 (node_modules/got/node_modules/timed-out):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: No valid versions available <span class="pl-k">for</span> timed-out

npm ERR<span class="pl-k">!</span> code ENOVERSIONS
npm ERR<span class="pl-k">!</span> No valid versions available <span class="pl-k">for</span> duplexer3

npm ERR<span class="pl-k">!</span> A <span class="pl-c1">complete</span> log of this run can be found in:
npm ERR<span class="pl-k">!</span>     /Users/sgore/.npm/_logs/2018-01-06T19_02_46_815Z-debug.log
</pre></div>
<p dir="auto">Additionally, When I check at npmjs.org there is no duplexer3 package listed.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li>Following the steps from getting started - <a href="https://learnnextjs.com/basics/getting-started/setup" rel="nofollow">https://learnnextjs.com/basics/getting-started/setup</a></li>
<li>npm install --save next</li>
<li></li>
<li></li>
</ol>
<h2 dir="auto">Context</h2>


<p dir="auto">I am unable to get started with next</p>
<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></td>
</tr>
<tr>
<td>node</td>
<td>9.3.0</td>
</tr>
<tr>
<td>npm</td>
<td>5.5.1</td>
</tr>
<tr>
<td>OS</td>
<td>MacOS X El Capitan 10.11.6</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<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">Overview</h2>
<p dir="auto">React 16.3 will include a utility for ref forwarding called <code class="notranslate">React.forwardRef</code>. <a href="https://github.com/reactjs/rfcs/pull/30" data-hovercard-type="pull_request" data-hovercard-url="/reactjs/rfcs/pull/30/hovercard">Its RFC</a> has been ratified and the initial implementation is available in alpha builds of 16.3.</p>
<p dir="auto">The <code class="notranslate">typeof</code> objects returned by <code class="notranslate">forwardRef</code> happens to be <code class="notranslate">"object"</code>, not <code class="notranslate">"function"</code>, which means that if you wrap your Page component in a HOC that uses <code class="notranslate">forwardRef</code>, it will fail the overly-aggressive <a href="https://github.com/zeit/next.js/blob/01f05d8cbc0333dd629f3c6bb180d73c41fed968/lib/app.js#L36-L40">test here</a>.</p>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">If I wrap a top-level Page component with <code class="notranslate">React.forwardRef</code>, I expect Next.js to render it without issue.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">If I wrap a top-level Page component with <code class="notranslate">React.forwardRef</code>, Next.js throws the following error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Error: The default export is not a React Component in page: ..."><pre class="notranslate"><code class="notranslate">Error: The default export is not a React Component in page: ...
</code></pre></div>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">For any Page component in a Next.js app, add the following lines:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// ...
const MyPage = () =&gt; (...);
export default React.forwardRef((props, ref) =&gt; &lt;MyPage {...props} forwardedRef={ref} /&gt;);"><pre class="notranslate"><span class="pl-c">// ...</span>
<span class="pl-k">const</span> <span class="pl-v">MyPage</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-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">export</span> <span class="pl-s1">default</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">forwardRef</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">,</span> <span class="pl-s1">ref</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">&lt;</span><span class="pl-v">MyPage</span> <span class="pl-kos">{</span>...<span class="pl-s1">props</span><span class="pl-kos">}</span> <span class="pl-c1">forwardedRef</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">ref</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></pre></div>
<h2 dir="auto">Context</h2>
<p dir="auto">As soon as the <code class="notranslate">forwardRef</code> API is released, library that expose HOCs are going to start using it to provide a standard way of accessing the ref of the wrapped component. (Prior to this, each HOC library would take a slightly different approach.)</p>
<p dir="auto">As more libraries and apps are updated, the number of people impacted will grow. I expect this to happen fairly rapidly, at least for actively-maintained libraries.</p>
<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>5.0.1-canary.17</td>
</tr>
</tbody>
</table>