<p dir="auto">I recently tried to define special presets in <code class="notranslate">.babelrc</code> only for test environment in <a href="https://github.com/zeit/next.js/tree/v3-beta/examples/with-jest">with-jest example</a>.<br>
When importing a file for testing that uses React and/or StyledJSX and that does not manually <code class="notranslate">import</code> React and/or StyledJSX, the test will fail with following error message:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="SyntaxError: Unexpected token import"><pre class="notranslate"><code class="notranslate">SyntaxError: Unexpected token import
</code></pre></div>
<p dir="auto">This is because the automatically added imports of React/StyledJSX are always es2015 style module imports.</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">A simple <code class="notranslate">.babelrc</code> that only defines a special <code class="notranslate">test</code> env should be possible.<br>
In my opinion it should be possible to use the following <code class="notranslate">.babelrc</code>:</p>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;presets&quot;: &quot;next/babel&quot;,
  &quot;env&quot;: {
    &quot;test&quot;: {
      &quot;presets&quot;: [
        &quot;env&quot;,
        &quot;next/babel&quot;
      ]
    }
  }
}
"><pre class="notranslate">{
  <span class="pl-ent">"presets"</span>: <span class="pl-s"><span class="pl-pds">"</span>next/babel<span class="pl-pds">"</span></span>,
  <span class="pl-ent">"env"</span>: {
    <span class="pl-ent">"test"</span>: {
      <span class="pl-ent">"presets"</span>: [
        <span class="pl-s"><span class="pl-pds">"</span>env<span class="pl-pds">"</span></span>,
        <span class="pl-s"><span class="pl-pds">"</span>next/babel<span class="pl-pds">"</span></span>
      ]
    }
  }
}
</pre></div>
<p dir="auto">I played with this issue <a href="https://github.com/pex/next.js/tree/jest-babel-next-issue">on a separate branch</a>. Currently you could work around this issue by importing React &amp; StyledJSX manually:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from 'react'
import _JSXStyle from 'styled-jsx/style'"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span>
<span class="pl-k">import</span> <span class="pl-s1">_JSXStyle</span> <span class="pl-k">from</span> <span class="pl-s">'styled-jsx/style'</span></pre></div>

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

<p dir="auto">Either you define <code class="notranslate">development</code>, <code class="notranslate">production</code> and <code class="notranslate">test</code> envs in <code class="notranslate">.babelrc</code> whereas <code class="notranslate">development</code> and <code class="notranslate">production</code> or you manually import React / StyledJSX. Otherwise tests with JEST will fail.</p>

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


<ol dir="auto">
<li>Goto <code class="notranslate">examples/with-jest</code></li>
<li>Simplify your <code class="notranslate">.babelrc</code> as proposed</li>
<li>Run <code class="notranslate">$ npm run test</code></li>
</ol>
<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">It is not possible to navigate to a page after it has been disposed by the server.</p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto"><a href="https://github.com/alexanderte/next-dispose-issue">https://github.com/alexanderte/next-dispose-issue</a></p>
<p dir="auto">Steps to reproduce the behavior, please provide code snippets or a repository:</p>
<ol dir="auto">
<li><code class="notranslate">npm run dev</code></li>
<li>Go to <a href="http://localhost:3000/a" rel="nofollow">http://localhost:3000/a</a></li>
<li>Navigate between pages A, B, and C – which does work</li>
<li>Go to another tab, do something else for about a minute</li>
<li>See server console message that one of the pages have been disposed</li>
<li>Navigate between pages A, B, and C – and one of the links doesn’t work anymore</li>
</ol>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">Even though a page has been disposed I would expect it to be re-created and to not break navigation.</p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: Windows</li>
<li>Browser: Chrome, Firefox</li>
<li>Version of Next.js: 7.01</li>
</ul>