<p dir="auto">I tried to add jest to my nextjs app. To do this, I simply added a babelrc file to my project root (see content below). The tests run now but my app won't start anymore.</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>
<ul dir="auto">
<li><code class="notranslate">npm run dev</code> should start the app</li>
<li><code class="notranslate">npm test</code> should start jest testing</li>
</ul>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">When the following babelrc file is added to project root...</p>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;env&quot; : {
    &quot;test&quot;: {
      &quot;presets&quot;: [&quot;env&quot;, &quot;react&quot;, &quot;stage-2&quot;],
      &quot;plugins&quot;: [&quot;transform-export-extensions&quot;],
      &quot;only&quot;: [
        &quot;./**/*.js&quot;,
        &quot;node_modules/jest-runtime&quot;
      ]
    }
  }
}"><pre class="notranslate">{
  <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>react<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>stage-2<span class="pl-pds">"</span></span>],
      <span class="pl-ent">"plugins"</span>: [<span class="pl-s"><span class="pl-pds">"</span>transform-export-extensions<span class="pl-pds">"</span></span>],
      <span class="pl-ent">"only"</span>: [
        <span class="pl-s"><span class="pl-pds">"</span>./**/*.js<span class="pl-pds">"</span></span>,
        <span class="pl-s"><span class="pl-pds">"</span>node_modules/jest-runtime<span class="pl-pds">"</span></span>
      ]
    }
  }
}</pre></div>
<p dir="auto">... <code class="notranslate">npm test</code> runs fine but <code class="notranslate">npm run dev</code> fails giving this error:</p>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="ERROR  Failed to compile with 1 errors                                                                                                                                 12:28:08

error  in ./pages/_document.js?entry

Syntax Error: Unexpected token (29:6)

  27 |   render() {
  28 |     return (
&gt; 29 |       &lt;html lang={this.props.local.lang_short_value}&gt;
     |       ^
  30 |         &lt;Head /&gt;
  31 |         &lt;body&gt;
  32 |           &lt;Main /&gt;

 @ multi ./pages/_document.js?entry

{ Error: Cannot find module /web/.next/dist/pages/_document
    at _callee$ (/web/node_modules/next/dist/server/resolve.js:220:19)
    at tryCatch (/web/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/web/node_modules/regenerator-runtime/runtime.js:296:22)
    at Generator.prototype.(anonymous function) [as next] (/web/node_modules/regenerator-runtime/runtime.js:114:21)
    at step (/web/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
    at /web/node_modules/babel-runtime/helpers/asyncToGenerator.js:28:13
    at &lt;anonymous&gt; code: 'ENOENT' }"><pre class="notranslate">ERROR  Failed to compile with 1 errors                                                                                                                                 12:28:08

error  <span class="pl-k">in</span> ./pages/_document.js<span class="pl-k">?</span>entry

Syntax Error: Unexpected token (29:6)

  27 <span class="pl-k">|</span>   <span class="pl-en">render</span>() {
  28 <span class="pl-k">|</span>     <span class="pl-k">return</span> (
<span class="pl-k">&gt;</span> 29 <span class="pl-k">|</span>       <span class="pl-k">&lt;</span>html lang={this.props.local.lang_short_value}<span class="pl-k">&gt;</span>
     <span class="pl-k">|</span>       ^
  30 <span class="pl-k">|</span>         <span class="pl-k">&lt;</span>Head /<span class="pl-k">&gt;</span>
  31 <span class="pl-k">|</span>         <span class="pl-k">&lt;</span>body<span class="pl-k">&gt;</span>
  32 <span class="pl-k">|</span>           <span class="pl-k">&lt;</span>Main /<span class="pl-k">&gt;</span>

 @ multi ./pages/_document.js<span class="pl-k">?</span>entry

{ Error: Cannot find module /web/.next/dist/pages/_document
    at _callee$ (/web/node_modules/next/dist/server/resolve.js:220:19)
    at tryCatch (/web/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/web/node_modules/regenerator-runtime/runtime.js:296:22)
    at Generator.prototype.(anonymous function) [as next] (/web/node_modules/regenerator-runtime/runtime.js:114:21)
    at step (/web/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
    at /web/node_modules/babel-runtime/helpers/asyncToGenerator.js:28:13
    at <span class="pl-k">&lt;</span>anonymous<span class="pl-k">&gt;</span> code: <span class="pl-s"><span class="pl-pds">'</span>ENOENT<span class="pl-pds">'</span></span> }</pre></div>
<p dir="auto"><a href="https://github.com/zeit/next.js/#customizing-babel-config">Reading the docs</a>, I found out that the babelrc file needs <code class="notranslate">"presets": ["next/babel", "env"]</code>. So I changed the babelrc file to this:</p>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;env&quot; : {
    &quot;dev&quot;: {
      &quot;presets&quot;: [&quot;next/babel&quot;, &quot;env&quot;]
    },
    &quot;test&quot;: {
      &quot;presets&quot;: [&quot;env&quot;, &quot;react&quot;, &quot;stage-2&quot;],
      &quot;plugins&quot;: [&quot;transform-export-extensions&quot;],
      &quot;only&quot;: [
        &quot;./**/*.js&quot;,
        &quot;node_modules/jest-runtime&quot;
      ]
    }
  }
}"><pre class="notranslate">{
  <span class="pl-ent">"env"</span> : {
    <span class="pl-ent">"dev"</span>: {
      <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-s"><span class="pl-pds">"</span>env<span class="pl-pds">"</span></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>react<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>stage-2<span class="pl-pds">"</span></span>],
      <span class="pl-ent">"plugins"</span>: [<span class="pl-s"><span class="pl-pds">"</span>transform-export-extensions<span class="pl-pds">"</span></span>],
      <span class="pl-ent">"only"</span>: [
        <span class="pl-s"><span class="pl-pds">"</span>./**/*.js<span class="pl-pds">"</span></span>,
        <span class="pl-s"><span class="pl-pds">"</span>node_modules/jest-runtime<span class="pl-pds">"</span></span>
      ]
    }
  }
}</pre></div>
<p dir="auto">But this still doesn't work. Did I miss something?</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ul dir="auto">
<li>Use the babelrc and package.json provided</li>
<li>run <code class="notranslate">npm run dev</code></li>
</ul>
<h2 dir="auto">Context</h2>
<h3 dir="auto">package.json</h3>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;scripts&quot;: {
    &quot;dev&quot;: &quot;next&quot;,
    &quot;build&quot;: &quot;next build&quot;,
    &quot;start&quot;: &quot;next start&quot;,
    &quot;test&quot;: &quot;jest&quot;
  },
  &quot;jest&quot;: {
    &quot;transform&quot;: {
      &quot;^.+\\.js?$&quot;: &quot;babel-jest&quot;
    },
    &quot;transformIgnorePatterns&quot;: [
      &quot;!node_modules/react-runtime&quot;
    ]
  },
  &quot;devDependencies&quot;: {
    &quot;babel-jest&quot;: &quot;^22.1.0&quot;,
    &quot;babel-plugin-transform-export-extensions&quot;: &quot;^6.22.0&quot;,
    &quot;babel-preset-env&quot;: &quot;^1.6.1&quot;,
    &quot;babel-preset-react&quot;: &quot;^6.24.1&quot;,
    &quot;babel-preset-stage-2&quot;: &quot;^6.24.1&quot;,
    &quot;enzyme&quot;: &quot;^3.3.0&quot;,
    &quot;enzyme-adapter-react-16&quot;: &quot;^1.1.1&quot;,
    &quot;eslint&quot;: &quot;^4.17.0&quot;,
    &quot;eslint-config-airbnb&quot;: &quot;^16.1.0&quot;,
    &quot;eslint-plugin-import&quot;: &quot;^2.8.0&quot;,
    &quot;eslint-plugin-jsx-a11y&quot;: &quot;^6.0.3&quot;,
    &quot;eslint-plugin-react&quot;: &quot;^7.5.1&quot;,
    &quot;jest&quot;: &quot;^22.1.4&quot;,
    &quot;react-test-renderer&quot;: &quot;^16.2.0&quot;
  },
  &quot;dependencies&quot;: {
    &quot;apollo-cache-inmemory&quot;: &quot;^1.1.7&quot;,
    &quot;apollo-client&quot;: &quot;^2.2.3&quot;,
    &quot;apollo-client-preset&quot;: &quot;^1.0.8&quot;,
    &quot;apollo-link&quot;: &quot;^1.1.0&quot;,
    &quot;apollo-link-error&quot;: &quot;^1.0.5&quot;,
    &quot;apollo-link-http&quot;: &quot;^1.3.3&quot;,
    &quot;bcryptjs&quot;: &quot;^2.4.3&quot;,
    &quot;graphql&quot;: &quot;^0.12.3&quot;,
    &quot;graphql-tag&quot;: &quot;^2.7.3&quot;,
    &quot;moment&quot;: &quot;^2.20.1&quot;,
    &quot;next&quot;: &quot;^4.2.3&quot;,
    &quot;node-fetch&quot;: &quot;^1.7.3&quot;,
    &quot;prop-types&quot;: &quot;^15.6.0&quot;,
    &quot;radium&quot;: &quot;^0.19.6&quot;,
    &quot;react&quot;: &quot;^16.2.0&quot;,
    &quot;react-apollo&quot;: &quot;^2.0.4&quot;,
    &quot;react-autosuggest&quot;: &quot;^9.3.3&quot;,
    &quot;react-dom&quot;: &quot;^16.2.0&quot;,
    &quot;react-id-swiper&quot;: &quot;^1.5.8&quot;,
    &quot;react-touch-events&quot;: &quot;^2.1.0&quot;,
    &quot;styled-jsx&quot;: &quot;^2.2.4&quot;
  }
}"><pre class="notranslate">{
  <span class="pl-ent">"scripts"</span>: {
    <span class="pl-ent">"dev"</span>: <span class="pl-s"><span class="pl-pds">"</span>next<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"build"</span>: <span class="pl-s"><span class="pl-pds">"</span>next build<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"start"</span>: <span class="pl-s"><span class="pl-pds">"</span>next start<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"test"</span>: <span class="pl-s"><span class="pl-pds">"</span>jest<span class="pl-pds">"</span></span>
  },
  <span class="pl-ent">"jest"</span>: {
    <span class="pl-ent">"transform"</span>: {
      <span class="pl-ent">"^.+<span class="pl-cce">\\</span>.js?$"</span>: <span class="pl-s"><span class="pl-pds">"</span>babel-jest<span class="pl-pds">"</span></span>
    },
    <span class="pl-ent">"transformIgnorePatterns"</span>: [
      <span class="pl-s"><span class="pl-pds">"</span>!node_modules/react-runtime<span class="pl-pds">"</span></span>
    ]
  },
  <span class="pl-ent">"devDependencies"</span>: {
    <span class="pl-ent">"babel-jest"</span>: <span class="pl-s"><span class="pl-pds">"</span>^22.1.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"babel-plugin-transform-export-extensions"</span>: <span class="pl-s"><span class="pl-pds">"</span>^6.22.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"babel-preset-env"</span>: <span class="pl-s"><span class="pl-pds">"</span>^1.6.1<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"babel-preset-react"</span>: <span class="pl-s"><span class="pl-pds">"</span>^6.24.1<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"babel-preset-stage-2"</span>: <span class="pl-s"><span class="pl-pds">"</span>^6.24.1<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"enzyme"</span>: <span class="pl-s"><span class="pl-pds">"</span>^3.3.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"enzyme-adapter-react-16"</span>: <span class="pl-s"><span class="pl-pds">"</span>^1.1.1<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"eslint"</span>: <span class="pl-s"><span class="pl-pds">"</span>^4.17.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"eslint-config-airbnb"</span>: <span class="pl-s"><span class="pl-pds">"</span>^16.1.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"eslint-plugin-import"</span>: <span class="pl-s"><span class="pl-pds">"</span>^2.8.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"eslint-plugin-jsx-a11y"</span>: <span class="pl-s"><span class="pl-pds">"</span>^6.0.3<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"eslint-plugin-react"</span>: <span class="pl-s"><span class="pl-pds">"</span>^7.5.1<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"jest"</span>: <span class="pl-s"><span class="pl-pds">"</span>^22.1.4<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"react-test-renderer"</span>: <span class="pl-s"><span class="pl-pds">"</span>^16.2.0<span class="pl-pds">"</span></span>
  },
  <span class="pl-ent">"dependencies"</span>: {
    <span class="pl-ent">"apollo-cache-inmemory"</span>: <span class="pl-s"><span class="pl-pds">"</span>^1.1.7<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"apollo-client"</span>: <span class="pl-s"><span class="pl-pds">"</span>^2.2.3<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"apollo-client-preset"</span>: <span class="pl-s"><span class="pl-pds">"</span>^1.0.8<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"apollo-link"</span>: <span class="pl-s"><span class="pl-pds">"</span>^1.1.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"apollo-link-error"</span>: <span class="pl-s"><span class="pl-pds">"</span>^1.0.5<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"apollo-link-http"</span>: <span class="pl-s"><span class="pl-pds">"</span>^1.3.3<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"bcryptjs"</span>: <span class="pl-s"><span class="pl-pds">"</span>^2.4.3<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"graphql"</span>: <span class="pl-s"><span class="pl-pds">"</span>^0.12.3<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"graphql-tag"</span>: <span class="pl-s"><span class="pl-pds">"</span>^2.7.3<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"moment"</span>: <span class="pl-s"><span class="pl-pds">"</span>^2.20.1<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"next"</span>: <span class="pl-s"><span class="pl-pds">"</span>^4.2.3<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"node-fetch"</span>: <span class="pl-s"><span class="pl-pds">"</span>^1.7.3<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"prop-types"</span>: <span class="pl-s"><span class="pl-pds">"</span>^15.6.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"radium"</span>: <span class="pl-s"><span class="pl-pds">"</span>^0.19.6<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"react"</span>: <span class="pl-s"><span class="pl-pds">"</span>^16.2.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"react-apollo"</span>: <span class="pl-s"><span class="pl-pds">"</span>^2.0.4<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"react-autosuggest"</span>: <span class="pl-s"><span class="pl-pds">"</span>^9.3.3<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"react-dom"</span>: <span class="pl-s"><span class="pl-pds">"</span>^16.2.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"react-id-swiper"</span>: <span class="pl-s"><span class="pl-pds">"</span>^1.5.8<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"react-touch-events"</span>: <span class="pl-s"><span class="pl-pds">"</span>^2.1.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"styled-jsx"</span>: <span class="pl-s"><span class="pl-pds">"</span>^2.2.4<span class="pl-pds">"</span></span>
  }
}</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>^4.2.3</td>
</tr>
<tr>
<td>node</td>
<td>9.3.0</td>
</tr>
<tr>
<td>OS</td>
<td>macOS 10.13.3</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
<tr>
<td>etc</td>
<td>See package.json</td>
</tr>
</tbody>
</table>
<p dir="auto">What's wrong? :-(</p>
<blockquote>
<p dir="auto">Note: React-components outside of </p> will not be initialised by the browser. If you need shared components in all your pages (like a menu or a toolbar), do not add application logic here, but take a look at this example. <a href="https://github.com/zeit/next.js/tree/master/examples/layout-component">https://github.com/zeit/next.js/tree/master/examples/layout-component</a><p dir="auto"></p>
</blockquote>
<p dir="auto">OK. But it very useful.</p>
<p dir="auto">The layout inside the component is created every time a page is moved to a new page. But the layout should not be created every time you go to a new page.</p>
<p dir="auto">Also, the layout should have an asynchronous initialization method.</p>
<p dir="auto">Ideally, it would be possible to create several layouts and set the current layout in the component page.</p>