<h1 dir="auto">Feature request</h1>
<p dir="auto">Add a way to control the versions of babel packages.</p>
<h2 dir="auto">Is your feature request related to a problem? Please describe.</h2>
<p dir="auto">Yes.</p>
<p dir="auto">I installed <code class="notranslate">@babel/preset-env</code> and passed 7.4.4 options (<code class="notranslate">core: 3</code>) to it but it used the old one. It really confused me. (Later I saw in docs it doesn't work indeed)</p>
<p dir="auto">A potential problem might also be with plugins like <code class="notranslate">@babel/plugin-transform-flow-strip-types</code> that are not coming out of the box in <code class="notranslate">next.js</code>.</p>
<p dir="auto">They are added with the <strong>latest version</strong> where the babel core is a pinned down a lower version.</p>
<p dir="auto">This is a partial code from my <code class="notranslate">package.json</code>, I didn't know <code class="notranslate">@babel/core</code> is ignored and nothing warned me it is.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    &quot;@babel/core&quot;: &quot;^7.4.4&quot;,
    &quot;@babel/preset-env&quot;: &quot;^7.4.4&quot;,
    &quot;@babel/plugin-transform-flow-strip-types&quot;: &quot;^7.4.4&quot;,
    &quot;@babel/plugin-proposal-optional-chaining&quot;: &quot;^7.2.0&quot;,"><pre class="notranslate"><code class="notranslate">    "@babel/core": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "@babel/plugin-transform-flow-strip-types": "^7.4.4",
    "@babel/plugin-proposal-optional-chaining": "^7.2.0",
</code></pre></div>
<h2 dir="auto">Describe the solution you'd like</h2>
<p dir="auto">I think if a user adds <code class="notranslate">@babel/core</code> to his root project <code class="notranslate">package.json</code> next should use all babel versions from the user's code, and warn if he doesn't use all the expected in next.js babel plugins.</p>
<p dir="auto">We should also consider adding a script to eject all babel dependencies from next to the user's project. For example: <code class="notranslate">next eject-babel</code> (somehow like in <code class="notranslate">create-react-app</code>)</p>
<h2 dir="auto">Describe alternatives you've considered</h2>
<p dir="auto">The readme documents the following:</p>
<blockquote>
<p dir="auto">The next/babel preset includes everything needed to transpile React applications. This includes:</p>
<ul dir="auto">
<li>preset-env</li>
<li>preset-react</li>
<li>plugin-proposal-class-properties</li>
<li>plugin-proposal-object-rest-spread</li>
<li>plugin-transform-runtime</li>
<li>styled-jsx<br>
These presets / plugins <strong>should not</strong> be added to your custom .babelrc. Instead, you can configure them on the next/babel preset:</li>
</ul>
</blockquote>
<p dir="auto">But I think we should also tell the user he should use older versions of babel plugins and expose the babel version nextjs is using.</p>
<p dir="auto">Also, we can warn the user that we ignore <code class="notranslate">@babel/core</code> and <code class="notranslate">@babel/preset-env</code> if he adds <code class="notranslate">@babel/core</code> to the project and runs next.</p>
<h2 dir="auto">Additional context</h2>
<p dir="auto">I'd be glad to add all these features if this feature is accepted.</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">Bug<br>
typechecking should occur in the typescript examples</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">typechecking does not occur</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li>Clone the with-typescript or custom-server-typescript repos</li>
<li>in pages/index.jsx write the below function</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="function typeCheckingNotCalled(): boolean {
      return 'abc';
}

// call function to prevent typescript error about function unused
typeCheckingNotCalled() "><pre class="notranslate"><code class="notranslate">function typeCheckingNotCalled(): boolean {
      return 'abc';
}

// call function to prevent typescript error about function unused
typeCheckingNotCalled() 
</code></pre></div>
<ol start="3" dir="auto">
<li>Run <code class="notranslate">npm run build</code></li>
</ol>
<p dir="auto">In step 3 you should expect an error that says <code class="notranslate">'abc' is not assignable to boolean</code>.<br>
However it builds fine.</p>
<h2 dir="auto">Context</h2>
<p dir="auto">I'm trying to use next js with typescript</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>5</td>
</tr>
<tr>
<td>node</td>
<td>8.10</td>
</tr>
<tr>
<td>OS</td>
<td>mac osx 10.13</td>
</tr>
<tr>
<td>browser</td>
<td>chrome 64</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>