<h2 dir="auto">Bug Report</h2>
<p dir="auto"><strong>Current Behavior</strong><br>
@babel/plugin-transform-block-scoping (and maybe some other plugin in preset-env) incorrectly renames a FunctionDeclaration in a nested block even though it should behave like a <code class="notranslate">var</code> declaration.</p>
<p dir="auto"><strong>Input Code</strong><br>
<a href="https://babeljs.io/repl#?babili=false&amp;browsers=%3E%202%25&amp;build=&amp;builtIns=false&amp;spec=false&amp;loose=true&amp;code_lz=JYMwFALgTgrgpgSgAQG8BQSkhgOwMYTAD2OSsOYy6mmUcEMUpAqsDhABwCCUUAhgE8AdCChEAtmADaARgA0SAEwKAzAF0EAbgxIAvmn1ps-QiSQQ4AZwiVUOugyZlclbYbwlLRADZwh3ogBzSCsbBC00IA&amp;debug=false&amp;forceAllTransforms=false&amp;shippedProposals=false&amp;circleciRepo=&amp;evaluate=false&amp;fileSize=false&amp;timeTravel=false&amp;sourceType=module&amp;lineWrap=false&amp;presets=&amp;prettier=false&amp;targets=Node-8&amp;version=7.4.5&amp;externalPlugins=%40babel%2Fplugin-transform-block-scoping%407.4.4" rel="nofollow">REPL</a></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="if(true) {
  function run() {
    return true;
  }
}

function test() {
  return run();
}"><pre class="notranslate"><span class="pl-k">if</span><span class="pl-kos">(</span><span class="pl-c1">true</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">function</span> <span class="pl-en">run</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-c1">true</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-k">function</span> <span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-en">run</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"><em>Note</em>: turning <code class="notranslate">function run() {</code> into <code class="notranslate">var run = function() {</code> behaves correctly.</p>
<p dir="auto"><strong>Expected behavior/code</strong><br>
Same as Input</p>
<p dir="auto"><strong>Actual output</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="if (true) {
  function _run() { // &lt;-------
    return true;
  }
}

function test() {
  return run();
}"><pre class="notranslate"><span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">true</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">function</span> <span class="pl-en">_run</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-c">// &lt;-------</span>
    <span class="pl-k">return</span> <span class="pl-c1">true</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-k">function</span> <span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-en">run</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"><strong>Babel Configuration (.babelrc, package.json, cli command)</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;plugins&quot;: [&quot;@babel/plugin-transform-block-scoping&quot;]
}"><pre class="notranslate"><span class="pl-kos">{</span>
  <span class="pl-s">"plugins"</span>: <span class="pl-kos">[</span><span class="pl-s">"@babel/plugin-transform-block-scoping"</span><span class="pl-kos">]</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">or</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;presets&quot;: [&quot;@babel/preset-env&quot;]
}"><pre class="notranslate"><span class="pl-kos">{</span>
  <span class="pl-s">"presets"</span>: <span class="pl-kos">[</span><span class="pl-s">"@babel/preset-env"</span><span class="pl-kos">]</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto"><strong>Environment</strong></p>
<ul dir="auto">
<li>Babel version(s): 7.4.0</li>
<li>Node/npm version: Node 10</li>
<li>OS: macOS</li>
<li>Monorepo: -</li>
<li>How you are using Babel: via babel-core</li>
</ul>
<h2 dir="auto">Bug Report</h2>
<p dir="auto"><strong>Current behavior</strong><br>
Babel is not able to output the optional chaining operator without first transpiling it.</p>
<p dir="auto">With a browserslist of: <code class="notranslate">last 2 Chrome versions</code></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="ERROR in ./index.js 3:14
Module parse failed: Unexpected token (3:14)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| (() =&gt; {
|   const x = 'abc';
&gt;   const y = x?.length;
| })();"><pre class="notranslate"><code class="notranslate">ERROR in ./index.js 3:14
Module parse failed: Unexpected token (3:14)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| (() =&gt; {
|   const x = 'abc';
&gt;   const y = x?.length;
| })();
</code></pre></div>
<p dir="auto">With a browserslist of: <code class="notranslate">last 2 Chrome versions, IE 11</code>, it succeeds. However the output (as expected) has the optional chaining operator transpiled to</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  var x = 'abc';
  var y = x === null || x === void 0 ? void 0 : x.length;"><pre class="notranslate">  <span class="pl-k">var</span> <span class="pl-s1">x</span> <span class="pl-c1">=</span> <span class="pl-s">'abc'</span><span class="pl-kos">;</span>
  <span class="pl-k">var</span> <span class="pl-s1">y</span> <span class="pl-c1">=</span> <span class="pl-s1">x</span> <span class="pl-c1">===</span> <span class="pl-c1">null</span> <span class="pl-c1">||</span> <span class="pl-s1">x</span> <span class="pl-c1">===</span> <span class="pl-k">void</span> <span class="pl-c1">0</span> ? <span class="pl-k">void</span> <span class="pl-c1">0</span> : <span class="pl-s1">x</span><span class="pl-kos">.</span><span class="pl-c1">length</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Input Code</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const x = 'abc';
const y = x?.length;"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">x</span> <span class="pl-c1">=</span> <span class="pl-s">'abc'</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">y</span> <span class="pl-c1">=</span> <span class="pl-s1">x</span><span class="pl-kos">?.</span><span class="pl-c1">length</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Expected behavior</strong><br>
Babel would succeed even when the browserslist only lists browsers that currently support the optional chaining operator.</p>
<p dir="auto"><strong>Babel Configuration</strong></p>
<ul dir="auto">
<li><code class="notranslate">babel.config.js</code></li>
</ul>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="module.exports = {
  presets: ['@babel/preset-env'],
};"><pre class="notranslate"><span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">presets</span>: <span class="pl-kos">[</span><span class="pl-s">'@babel/preset-env'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<ul dir="auto">
<li><code class="notranslate">.browserslistrc</code></li>
</ul>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="last 2 Chrome versions"><pre class="notranslate"><code class="notranslate">last 2 Chrome versions
</code></pre></div>
<ul dir="auto">
<li><code class="notranslate">webpack.config.js</code></li>
</ul>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="module.exports = {
  entry: './index.js',

  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
      },
    ],
  },
};"><pre class="notranslate"><span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">entry</span>: <span class="pl-s">'./index.js'</span><span class="pl-kos">,</span>

  <span class="pl-c1">module</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">rules</span>: <span class="pl-kos">[</span>
      <span class="pl-kos">{</span>
        <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span>js<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span>
        <span class="pl-c1">use</span>: <span class="pl-s">'babel-loader'</span><span class="pl-kos">,</span>
      <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<ul dir="auto">
<li><code class="notranslate">index.js</code></li>
</ul>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="(() =&gt; {
  const x = 'abc';
  const y = x?.length;
})();"><pre class="notranslate"><span class="pl-kos">(</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-k">const</span> <span class="pl-s1">x</span> <span class="pl-c1">=</span> <span class="pl-s">'abc'</span><span class="pl-kos">;</span>
  <span class="pl-k">const</span> <span class="pl-s1">y</span> <span class="pl-c1">=</span> <span class="pl-s1">x</span><span class="pl-kos">?.</span><span class="pl-c1">length</span><span class="pl-kos">;</span>
<span class="pl-kos">}</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"><strong>Environment</strong></p>
<ul dir="auto">
<li>Babel version: v7.11.6</li>
<li>Node/Yarn version: Node 12.18.4/Yarn 1.22.4</li>
<li>OS: Windows 10</li>
<li>Monorepo: No</li>
<li>How you are using Babel: <code class="notranslate">loader</code></li>
</ul>
<p dir="auto"><strong>Possible Solution</strong></p>

<p dir="auto"><strong>Additional context</strong><br>
Add any other context about the problem here. Or a screenshot if applicable</p>