<p dir="auto">I have a page with url denied in server.js (I should see the content of the _error page instead of the original "post.js" content), but when I access this url, the _error content is almost instantly rerendered by the original "post.js" content. Is there any way how to avoid this strange behavior?</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">After visitng localhost:3000/post url without additional parameter the server should post content of the custom _error.js page. (This behavior is standart in next v. 3.0.1)</p>

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

<p dir="auto">The _error page is loaded, but almost instantly rerendered with post.js content. This behavior happens on next v. 3.0.2 and later.</p>

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


<ol dir="auto">
<li>Download or clone this repo <a href="https://github.com/josefkrajkar/custom-express-server">https://github.com/josefkrajkar/custom-express-server</a></li>
<li>Install dependencies <code class="notranslate">npm install</code></li>
<li>Run the dev server with command <code class="notranslate">npm run dev</code></li>
<li>Visit the <code class="notranslate">localhost:3000/post</code> in your browser</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>3.0.2</td>
</tr>
<tr>
<td>node</td>
<td>8.1.3</td>
</tr>
<tr>
<td>OS</td>
<td>MacOs Sierra 10.12.6</td>
</tr>
<tr>
<td>browser</td>
<td>Google Chrome 61.0.3163.100</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">Expected Behavior</h2>


<p dir="auto">Importing a constant and using it in a <code class="notranslate">&lt;style jsx&gt;</code> tag should work as per the documentation in tests using Jest</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">The imported constant is <code class="notranslate">undefined</code> when used in the <code class="notranslate">&lt;style jsx&gt;</code> template string (but is still defined elsewhere in the file)</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<p dir="auto">Make the following minor changes to the <code class="notranslate">with-jest</code> example app (<a href="https://github.com/zeit/next.js/tree/canary/examples/with-jest">https://github.com/zeit/next.js/tree/canary/examples/with-jest</a>):</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// with-jest-app/pages/index.js
import { red } from '../colors'; // new

export default () =&gt; (
  &lt;div&gt;
    &lt;style jsx&gt;{`
      p {
        color: ${red};
      }
    `}&lt;/style&gt;
    &lt;p&gt;Hello World!&lt;/p&gt;
  &lt;/div&gt;
);"><pre class="notranslate"><span class="pl-c">// with-jest-app/pages/index.js</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">red</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'../colors'</span><span class="pl-kos">;</span> <span class="pl-c">// new</span>

<span class="pl-k">export</span> <span class="pl-k">default</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-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">style</span> <span class="pl-c1">jsx</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s">`</span>
<span class="pl-s">      p {</span>
<span class="pl-s">        color: <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">red</span><span class="pl-kos">}</span></span>;</span>
<span class="pl-s">      }</span>
<span class="pl-s">    `</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">style</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>Hello World!<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// new file: with-jest-app/colors.js
export const red = '#F00';"><pre class="notranslate"><span class="pl-c">// new file: with-jest-app/colors.js</span>
<span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-s1">red</span> <span class="pl-c1">=</span> <span class="pl-s">'#F00'</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">No other changes to config, etc are required to reproduce the issue.</p>
<p dir="auto">In Next 5.x this works as expected both when running the app and also when using Jest.<br>
In Next 6.0.0 this works as expected when running the app but the Jest tests fail claiming:<br>
<code class="notranslate">ReferenceError: red is not defined</code>.</p>
<p dir="auto">I've found these workarounds that solve the issue (albeit in an ugly way) and may help you to diagnose the issue:</p>
<ol dir="auto">
<li>Assign to another variable first:</li>
</ol>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// with-jest-app/pages/index.js
import { red } from '../colors';

const alias = red;

export default () =&gt; (
  &lt;div&gt;
    &lt;style jsx&gt;{`
      p {
        color: ${alias};
      }
    `}&lt;/style&gt;
    &lt;p&gt;Hello World!&lt;/p&gt;
  &lt;/div&gt;
);"><pre class="notranslate"><span class="pl-c">// with-jest-app/pages/index.js</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">red</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'../colors'</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">alias</span> <span class="pl-c1">=</span> <span class="pl-s1">red</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">default</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-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">style</span> <span class="pl-c1">jsx</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s">`</span>
<span class="pl-s">      p {</span>
<span class="pl-s">        color: <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">alias</span><span class="pl-kos">}</span></span>;</span>
<span class="pl-s">      }</span>
<span class="pl-s">    `</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">style</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>Hello World!<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<ol start="2" dir="auto">
<li>Convert the variable expression into a boolean expression:</li>
</ol>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// with-jest-app/pages/index.js
import { red } from '../colors';

export default () =&gt; (
  &lt;div&gt;
    &lt;style jsx&gt;{`
      p {
        color: ${true &amp;&amp; red};
      }
    `}&lt;/style&gt;
    &lt;p&gt;Hello World!&lt;/p&gt;
  &lt;/div&gt;
);"><pre class="notranslate"><span class="pl-c">// with-jest-app/pages/index.js</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">red</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'../colors'</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">default</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-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">style</span> <span class="pl-c1">jsx</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s">`</span>
<span class="pl-s">      p {</span>
<span class="pl-s">        color: <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-c1">true</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">red</span><span class="pl-kos">}</span></span>;</span>
<span class="pl-s">      }</span>
<span class="pl-s">    `</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">style</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>Hello World!<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<h2 dir="auto">Context</h2>


<p dir="auto">Was trying to upgrade another (much larger) app to Next v6.0.0<br>
Note: It's entirely possible that this is actually an issue with another project (styled-jsx, jest, babel, etc) but as I noticed it when upgrading Next and am not sure how to narrow it down any further I have raised the issue here - I'm happy to close this issue and raise it on one of the other projects if you think that's more appropriate.</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>6.0.0</td>
</tr>
<tr>
<td>node</td>
<td>8.6.0</td>
</tr>
<tr>
<td>OS</td>
<td>Linux</td>
</tr>
<tr>
<td>Jest</td>
<td>22.4.3</td>
</tr>
</tbody>
</table>