<p dir="auto"><a href="https://github.com/zeit/next.js/tree/master/examples/with-firebase-hosting">with-firebase-hosting</a> example is giving error when upgrading Next to version 6. I tried it with <code class="notranslate">v6.0.0</code> and<code class="notranslate"> 6.0.1-canary.1</code>. Problem occurs when running <code class="notranslate">deploy</code> command.</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?q=is%3Aissue">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Project should deploy succesfully</p>


<h2 dir="auto">Current Behavior</h2>
<p dir="auto">It gives the error below</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="C:\projects\with-firebase-hosting&gt;yarn deploy
yarn run v1.6.0
warning package.json: No license field
$ firebase deploy

=== Deploying to '****-app'...

i  deploying functions, hosting
Running command: npm run build-funcs &amp;&amp; npm run build-app &amp;&amp; npm run copy-deps &amp;&amp; npm run install-deps

&gt; with-firebase-hosting@3.0.0 build-funcs C:\projects\with-firebase-hosting
&gt; babel &quot;src/functions&quot; --out-dir &quot;dist/functions&quot;

Error: Error: Cannot find module 'babel-preset-env' from 'C:\projects\with-firebase-hosting\src\functions'
- Did you mean &quot;@babel/env&quot;?
    at C:\projects\with-firebase-hosting\node_modules\@babel\cli\lib\babel\dir.js:185:22
    at C:\projects\with-firebase-hosting\node_modules\@babel\cli\lib\babel\dir.js:148:23
    at C:\projects\with-firebase-hosting\node_modules\@babel\cli\lib\babel\dir.js:120:23
    at C:\projects\with-firebase-hosting\node_modules\@babel\cli\lib\babel\dir.js:82:23
    at C:\projects\with-firebase-hosting\node_modules\@babel\cli\lib\babel\util.js:126:16
    at C:\projects\with-firebase-hosting\node_modules\@babel\core\lib\transform-file.js:49:14
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
    at Function.Module.runMain (module.js:695:11)
    at startup (bootstrap_node.js:188:16)"><pre class="notranslate"><code class="notranslate">C:\projects\with-firebase-hosting&gt;yarn deploy
yarn run v1.6.0
warning package.json: No license field
$ firebase deploy

=== Deploying to '****-app'...

i  deploying functions, hosting
Running command: npm run build-funcs &amp;&amp; npm run build-app &amp;&amp; npm run copy-deps &amp;&amp; npm run install-deps

&gt; with-firebase-hosting@3.0.0 build-funcs C:\projects\with-firebase-hosting
&gt; babel "src/functions" --out-dir "dist/functions"

Error: Error: Cannot find module 'babel-preset-env' from 'C:\projects\with-firebase-hosting\src\functions'
- Did you mean "@babel/env"?
    at C:\projects\with-firebase-hosting\node_modules\@babel\cli\lib\babel\dir.js:185:22
    at C:\projects\with-firebase-hosting\node_modules\@babel\cli\lib\babel\dir.js:148:23
    at C:\projects\with-firebase-hosting\node_modules\@babel\cli\lib\babel\dir.js:120:23
    at C:\projects\with-firebase-hosting\node_modules\@babel\cli\lib\babel\dir.js:82:23
    at C:\projects\with-firebase-hosting\node_modules\@babel\cli\lib\babel\util.js:126:16
    at C:\projects\with-firebase-hosting\node_modules\@babel\core\lib\transform-file.js:49:14
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
    at Function.Module.runMain (module.js:695:11)
    at startup (bootstrap_node.js:188:16)
</code></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>6.0.0   &amp; 6.0.1-canary.1</td>
</tr>
<tr>
<td>node</td>
<td>8.11.1</td>
</tr>
<tr>
<td>OS</td>
<td>Windows 10</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">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>


<p dir="auto">Calling <code class="notranslate">app.render(req, res, pathname, query)</code> should not cause any issues.</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">If <code class="notranslate">app.render(req, res, pathname, query)</code> is called and <code class="notranslate">query</code> is not an object, there will be a nasty error that will happen when calling <code class="notranslate">Router.push</code> (or any other router method that internally calls <code class="notranslate">change</code>).</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li>Set up a custom Next.js server</li>
<li>Call <code class="notranslate">app.render</code> while passing an undefined value for <code class="notranslate">query</code>.</li>
<li>Call <code class="notranslate">Router.push</code> with the same <code class="notranslate">pathname</code> and a <code class="notranslate">query</code>.</li>
</ol>
<h2 dir="auto">Context</h2>


<p dir="auto">I was trying to move from a dynamic server to using static exports and had to deal with this bug for about two hours. I've gone deep into Next.js's source code so I can help pinpoint the exact path the bug follows. Basically, it's something like <code class="notranslate">app.render -&gt; renderToHTML -&gt; doRender -&gt; new Router</code>.</p>
<p dir="auto">To solve this issue it's as simple as modifying the <a href="https://github.com/zeit/next.js/blob/87d7ad2fc0ba887b1e51b7caaf893f532a8c2ea0/lib/shallow-equals.js">shallow comparison function</a> to be a bit more safe. It should check that both inputs are objects and if not return false. For now, I'm just doing the following:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="server.get('*', (req, res, n) =&gt; {
  const { pathname } = parse(req.url, true)
  const route = routes[pathname]
  if (route) return app.render(req, res, route.page, route.query || {})
  n()
})"><pre class="notranslate"><span class="pl-s1">server</span><span class="pl-kos">.</span><span class="pl-en">get</span><span class="pl-kos">(</span><span class="pl-s">'*'</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-s1">req</span><span class="pl-kos">,</span> <span class="pl-s1">res</span><span class="pl-kos">,</span> <span class="pl-s1">n</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-kos">{</span> pathname <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">parse</span><span class="pl-kos">(</span><span class="pl-s1">req</span><span class="pl-kos">.</span><span class="pl-c1">url</span><span class="pl-kos">,</span> <span class="pl-c1">true</span><span class="pl-kos">)</span>
  <span class="pl-k">const</span> <span class="pl-s1">route</span> <span class="pl-c1">=</span> <span class="pl-s1">routes</span><span class="pl-kos">[</span><span class="pl-s1">pathname</span><span class="pl-kos">]</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">route</span><span class="pl-kos">)</span> <span class="pl-k">return</span> <span class="pl-s1">app</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-s1">req</span><span class="pl-kos">,</span> <span class="pl-s1">res</span><span class="pl-kos">,</span> <span class="pl-s1">route</span><span class="pl-kos">.</span><span class="pl-c1">page</span><span class="pl-kos">,</span> <span class="pl-s1">route</span><span class="pl-kos">.</span><span class="pl-c1">query</span> <span class="pl-c1">||</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">)</span>
  <span class="pl-s1">n</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">This <a href="https://github.com/zeit/next.js/wiki/Centralizing-Routing">example</a> in the wiki should be updated.</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>3.2.2</td>
</tr>
<tr>
<td>node</td>
<td>8.4.0</td>
</tr>
<tr>
<td>OS</td>
<td>macOS 10.12.6</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 60.0.3112.113</td>
</tr>
</tbody>
</table>