<ul dir="auto">
<li>[x ] 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">Context</h2>
<p dir="auto">I combined <a href="https://github.com/zeit/next.js/tree/canary/examples/with-emotion">with-emotion</a> example and <a href="https://github.com/zeit/next.js/tree/canary/examples/using-preact">using-preact</a> example. For production build I aliased <code class="notranslate">react</code> to <code class="notranslate">preact</code> as shown in <a href="https://github.com/zeit/next.js/tree/canary/examples/using-preact">using-preact</a> example. After building the app(<code class="notranslate">next build</code>) and launching the app (<code class="notranslate">next start</code>) I am seeing below error in browser console.</p>
<details>
 <summary>Stack Trace</summary>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="_.default.hydrate is not a function
TypeError: _.default.hydrate is not a function
    at o (http://localhost:3000/_next/255b4ec75e53927fc721110ac93130bd/app.js:2:55939)
    at http://localhost:3000/_next/255b4ec75e53927fc721110ac93130bd/app.js:2:57828
    at r (http://localhost:3000/_next/255b4ec75e53927fc721110ac93130bd/app.js:2:60761)
    at Generator._invoke (http://localhost:3000/_next/255b4ec75e53927fc721110ac93130bd/app.js:2:61806)
    at Generator.e.(anonymous function) [as next] (http://localhost:3000/_next/255b4ec75e53927fc721110ac93130bd/app.js:2:60940)
    at r (http://localhost:3000/_next/255b4ec75e53927fc721110ac93130bd/app.js:2:29712)
    at http://localhost:3000/_next/255b4ec75e53927fc721110ac93130bd/app.js:2:29860
    at new Promise (&lt;anonymous&gt;)
    at new t (http://localhost:3000/_next/255b4ec75e53927fc721110ac93130bd/app.js:2:538)
    at http://localhost:3000/_next/255b4ec75e53927fc721110ac93130bd/app.js:2:29654
(anonymous) @ app.js:2
r @ app.js:2
(anonymous) @ app.js:2
e.(anonymous function) @ app.js:2
r @ app.js:2
(anonymous) @ app.js:2
t @ app.js:2
(anonymous) @ app.js:2
(anonymous) @ app.js:2
(anonymous) @ app.js:2
r @ app.js:2
(anonymous) @ app.js:2
e.(anonymous function) @ app.js:2
r @ app.js:2
(anonymous) @ app.js:2
Promise rejected (async)
r @ app.js:2
(anonymous) @ app.js:2
t @ app.js:2
(anonymous) @ app.js:2
(anonymous) @ app.js:2
(anonymous) @ app.js:2
r @ app.js:2
(anonymous) @ app.js:2
e.(anonymous function) @ app.js:2
r @ app.js:2
(anonymous) @ app.js:2
Promise resolved (async)
r @ app.js:2
(anonymous) @ app.js:2
Promise resolved (async)
r @ app.js:2
(anonymous) @ app.js:2
t @ app.js:2
(anonymous) @ app.js:2
(anonymous) @ app.js:2
n @ app.js:1
(anonymous) @ app.js:2
n @ app.js:1
window.webpackJsonp @ app.js:1
(anonymous) @ app.js:3
app.js:2 Uncaught (in promise) TypeError: _.default.hydrate is not a function
    at o (http://localhost:3000/_next/255b4ec75e53927fc721110ac93130bd/app.js:2:55939)
    at http://localhost:3000/_next/255b4ec75e53927fc721110ac93130bd/app.js:2:57048
    at r (http://localhost:3000/_next/255b4ec75e53927fc721110ac93130bd/app.js:2:60761)
    at Generator._invoke (http://localhost:3000/_next/255b4ec75e53927fc721110ac93130bd/app.js:2:61806)
    at Generator.e.(anonymous function) [as next] (http://localhost:3000/_next/255b4ec75e53927fc721110ac93130bd/app.js:2:60940)
    at r (http://localhost:3000/_next/255b4ec75e53927fc721110ac93130bd/app.js:2:29712)
    at http://localhost:3000/_next/255b4ec75e53927fc721110ac93130bd/app.js:2:29808
    at &lt;anonymous&gt;"><pre class="notranslate"><code class="notranslate">_.default.hydrate is not a function
TypeError: _.default.hydrate is not a function
    at o (http://localhost:3000/_next/255b4ec75e53927fc721110ac93130bd/app.js:2:55939)
    at http://localhost:3000/_next/255b4ec75e53927fc721110ac93130bd/app.js:2:57828
    at r (http://localhost:3000/_next/255b4ec75e53927fc721110ac93130bd/app.js:2:60761)
    at Generator._invoke (http://localhost:3000/_next/255b4ec75e53927fc721110ac93130bd/app.js:2:61806)
    at Generator.e.(anonymous function) [as next] (http://localhost:3000/_next/255b4ec75e53927fc721110ac93130bd/app.js:2:60940)
    at r (http://localhost:3000/_next/255b4ec75e53927fc721110ac93130bd/app.js:2:29712)
    at http://localhost:3000/_next/255b4ec75e53927fc721110ac93130bd/app.js:2:29860
    at new Promise (&lt;anonymous&gt;)
    at new t (http://localhost:3000/_next/255b4ec75e53927fc721110ac93130bd/app.js:2:538)
    at http://localhost:3000/_next/255b4ec75e53927fc721110ac93130bd/app.js:2:29654
(anonymous) @ app.js:2
r @ app.js:2
(anonymous) @ app.js:2
e.(anonymous function) @ app.js:2
r @ app.js:2
(anonymous) @ app.js:2
t @ app.js:2
(anonymous) @ app.js:2
(anonymous) @ app.js:2
(anonymous) @ app.js:2
r @ app.js:2
(anonymous) @ app.js:2
e.(anonymous function) @ app.js:2
r @ app.js:2
(anonymous) @ app.js:2
Promise rejected (async)
r @ app.js:2
(anonymous) @ app.js:2
t @ app.js:2
(anonymous) @ app.js:2
(anonymous) @ app.js:2
(anonymous) @ app.js:2
r @ app.js:2
(anonymous) @ app.js:2
e.(anonymous function) @ app.js:2
r @ app.js:2
(anonymous) @ app.js:2
Promise resolved (async)
r @ app.js:2
(anonymous) @ app.js:2
Promise resolved (async)
r @ app.js:2
(anonymous) @ app.js:2
t @ app.js:2
(anonymous) @ app.js:2
(anonymous) @ app.js:2
n @ app.js:1
(anonymous) @ app.js:2
n @ app.js:1
window.webpackJsonp @ app.js:1
(anonymous) @ app.js:3
app.js:2 Uncaught (in promise) TypeError: _.default.hydrate is not a function
    at o (http://localhost:3000/_next/255b4ec75e53927fc721110ac93130bd/app.js:2:55939)
    at http://localhost:3000/_next/255b4ec75e53927fc721110ac93130bd/app.js:2:57048
    at r (http://localhost:3000/_next/255b4ec75e53927fc721110ac93130bd/app.js:2:60761)
    at Generator._invoke (http://localhost:3000/_next/255b4ec75e53927fc721110ac93130bd/app.js:2:61806)
    at Generator.e.(anonymous function) [as next] (http://localhost:3000/_next/255b4ec75e53927fc721110ac93130bd/app.js:2:60940)
    at r (http://localhost:3000/_next/255b4ec75e53927fc721110ac93130bd/app.js:2:29712)
    at http://localhost:3000/_next/255b4ec75e53927fc721110ac93130bd/app.js:2:29808
    at &lt;anonymous&gt;
</code></pre></div>
</details>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Should not produce above error with <code class="notranslate">preact</code>. (It does not produce this error with <code class="notranslate">react</code> in production).</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">In production app its producing error mentioned in above stack trace.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li>
<p dir="auto">Download <a href="https://github.com/zeit/next.js/tree/canary/examples/with-emotion">with-emotion</a> example (instructions in its Readme)</p>
</li>
<li>
<p dir="auto">Update <code class="notranslate">next</code>, <code class="notranslate">react</code> and <code class="notranslate">react-dom</code>  to latest versions as versions used in this example are old.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" yarn add next react react-dom"><pre class="notranslate"><code class="notranslate"> yarn add next react react-dom
</code></pre></div>
</li>
<li>
<p dir="auto">Install <code class="notranslate">preact</code> and <code class="notranslate">preact-compat</code></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="yarn add preact preact-compat"><pre class="notranslate"><code class="notranslate">yarn add preact preact-compat
</code></pre></div>
</li>
<li>
<p dir="auto">Create <code class="notranslate">next.config.js</code> file at root of the project and add below content</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="module.exports = {
  webpack: function (config, { dev }) {
   // For the development version, we'll use React.
   // Because, it supports react hot loading and so on.
   if (dev) {
     return config
   }

   config.resolve.alias = {
     'react': 'preact-compat/dist/preact-compat',
     'react-dom': 'preact-compat/dist/preact-compat'
   }

    return config
 }
}"><pre class="notranslate"><span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-en">webpack</span>: <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">config</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> dev <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
   <span class="pl-c">// For the development version, we'll use React.</span>
   <span class="pl-c">// Because, it supports react hot loading and so on.</span>
   <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">dev</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
     <span class="pl-k">return</span> <span class="pl-s1">config</span>
   <span class="pl-kos">}</span>

   <span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">resolve</span><span class="pl-kos">.</span><span class="pl-c1">alias</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
     <span class="pl-s">'react'</span>: <span class="pl-s">'preact-compat/dist/preact-compat'</span><span class="pl-kos">,</span>
     <span class="pl-s">'react-dom'</span>: <span class="pl-s">'preact-compat/dist/preact-compat'</span>
   <span class="pl-kos">}</span>

    <span class="pl-k">return</span> <span class="pl-s1">config</span>
 <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
</li>
<li>
<p dir="auto">Then build and start the app</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="yarn build
yarn start"><pre class="notranslate"><code class="notranslate">yarn build
yarn start
</code></pre></div>
</li>
<li>
<p dir="auto">Open app <code class="notranslate">https://localhost:3000</code> and check browsers console.</p>
</li>
</ol>
<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>^4.1.4</td>
</tr>
<tr>
<td>node</td>
<td>v8.6.0</td>
</tr>
<tr>
<td>OS</td>
<td>OSX 10.13.1</td>
</tr>
<tr>
<td>browser</td>
<td>chrome Version 64.0.3273.0 (Official Build) canary (64-bit)</td>
</tr>
<tr>
<td>preact</td>
<td>^8.2.6</td>
</tr>
<tr>
<td>preact-compat</td>
<td>^3.17.0</td>
</tr>
<tr>
<td>react</td>
<td>^16.1.1</td>
</tr>
<tr>
<td>react-dom</td>
<td>^16.1.1</td>
</tr>
<tr>
<td>emotion</td>
<td>^8.0.5</td>
</tr>
</tbody>
</table>
<p dir="auto">/cc <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/mitchellhamilton/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/mitchellhamilton">@mitchellhamilton</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/tkh44/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/tkh44">@tkh44</a></p>
<p dir="auto">can not swich react 16 to inferno, i try to clone <a href="https://github.com/zeit/next.js/tree/canary/examples/using-inferno">https://github.com/zeit/next.js/tree/canary/examples/using-inferno</a> but not work</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">Expected Behavior</h2>
<p dir="auto"><code class="notranslate">Next.js 4 requires React 16</code></p>


<h2 dir="auto">Current Behavior</h2>


<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li>next build</li>
<li>next start</li>
<li><code class="notranslate">Next.js 4 requires React 16</code></li>
<li></li>
</ol>
<h2 dir="auto">Context</h2>


<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>4</td>
</tr>
<tr>
<td>node</td>
<td>9</td>
</tr>
<tr>
<td>OS</td>
<td>osx</td>
</tr>
<tr>
<td>browser</td>
<td>chrome</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>