<p dir="auto">Babel behaves weirdly when there are parameters containing parentheses:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@doCoolThings( (banana) )
class What {

    render() {
      return blah;
    }
}"><pre class="notranslate">@<span class="pl-en">doCoolThings</span><span class="pl-kos">(</span> <span class="pl-kos">(</span><span class="pl-s1">banana</span><span class="pl-kos">)</span> <span class="pl-kos">)</span>
<span class="pl-k">class</span> <span class="pl-v">What</span> <span class="pl-kos">{</span>

    <span class="pl-en">render</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-s1">blah</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">...Compiles to:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// ...

var What = (function () {
  function What() { /* ... */ }

  What.prototype.render = function render() {
    return blah;
  };

  // ???
  return What;
})();"><pre class="notranslate"><span class="pl-c">// ...</span>

<span class="pl-k">var</span> <span class="pl-v">What</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-k">function</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-v">What</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-c">/* ... */</span> <span class="pl-kos">}</span>

  <span class="pl-v">What</span><span class="pl-kos">.</span><span class="pl-c1">prototype</span><span class="pl-kos">.</span><span class="pl-en">render</span> <span class="pl-c1">=</span> <span class="pl-k">function</span> <span class="pl-en">render</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-s1">blah</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">;</span>

  <span class="pl-c">// ???</span>
  <span class="pl-k">return</span> <span class="pl-v">What</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">Note that there is no invocation of the decorator function inserted into the final code.</p>
<p dir="auto">Removing the parentheses around the <code class="notranslate">banana</code> parameter in the decorator, however, fixes this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@doCoolThings( banana )
class What {

    render() {
      return blah;
    }
}"><pre class="notranslate">@<span class="pl-en">doCoolThings</span><span class="pl-kos">(</span> <span class="pl-s1">banana</span> <span class="pl-kos">)</span>
<span class="pl-k">class</span> <span class="pl-v">What</span> <span class="pl-kos">{</span>

    <span class="pl-en">render</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-s1">blah</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">...Compiles to:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// ...

var What = (function () {
  function What() { /* ... */ }

  What.prototype.render = function render() {
    return blah;
  };

  // Hooray, call of decorator!
  var _What = What;
  What = doCoolThings(banana)(What) || What;
  return What;
})();"><pre class="notranslate"><span class="pl-c">// ...</span>

<span class="pl-k">var</span> <span class="pl-v">What</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-k">function</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-v">What</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-c">/* ... */</span> <span class="pl-kos">}</span>

  <span class="pl-v">What</span><span class="pl-kos">.</span><span class="pl-c1">prototype</span><span class="pl-kos">.</span><span class="pl-en">render</span> <span class="pl-c1">=</span> <span class="pl-k">function</span> <span class="pl-en">render</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-s1">blah</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">;</span>

  <span class="pl-c">// Hooray, call of decorator!</span>
  <span class="pl-k">var</span> <span class="pl-s1">_What</span> <span class="pl-c1">=</span> <span class="pl-v">What</span><span class="pl-kos">;</span>
  <span class="pl-v">What</span> <span class="pl-c1">=</span> <span class="pl-en">doCoolThings</span><span class="pl-kos">(</span><span class="pl-s1">banana</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-v">What</span><span class="pl-kos">)</span> <span class="pl-c1">||</span> <span class="pl-v">What</span><span class="pl-kos">;</span>
  <span class="pl-k">return</span> <span class="pl-v">What</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">If using an arrow function (like <code class="notranslate">(banana) =&gt; 55</code>), the effect is pretty much the same when the parentheses are present vs. non-present.</p>
<p dir="auto">Steps to reproduce :</p>
<ul dir="auto">
<li>Declare an import <code class="notranslate">import xxx from 'xxx'</code></li>
<li>Declare an ES6 class</li>
<li>Declare a method with an argument shadowing the import and having a default value : <code class="notranslate">foo(xxx = 'default') { ... }</code></li>
<li>Declare a second method using the import</li>
</ul>
<h3 dir="auto">Input Code</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import bar from './bar'

class Foo {
  foo(bar = 'Default bar') {}

  logImportedBar() {
    console.log(bar)
  }
}

const foo = new Foo()
foo.logImportedBar()"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-s1">bar</span> <span class="pl-k">from</span> <span class="pl-s">'./bar'</span>

<span class="pl-k">class</span> <span class="pl-v">Foo</span> <span class="pl-kos">{</span>
  <span class="pl-en">foo</span><span class="pl-kos">(</span><span class="pl-s1">bar</span> <span class="pl-c1">=</span> <span class="pl-s">'Default bar'</span><span class="pl-kos">)</span> <span class="pl-kos">{</span><span class="pl-kos">}</span>

  <span class="pl-en">logImportedBar</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">bar</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-k">const</span> <span class="pl-s1">foo</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Foo</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
<span class="pl-s1">foo</span><span class="pl-kos">.</span><span class="pl-en">logImportedBar</span><span class="pl-kos">(</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">Also see my <a href="https://github.com/nlepage/babel-bug-shadowing">repo with a simple example reproducing the issue</a>.</p>
<h3 dir="auto">Babel Configuration</h3>
<p dir="auto">.babelrc :</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;presets&quot;: [&quot;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">"env"</span><span class="pl-kos">]</span>
<span class="pl-kos">}</span></pre></div>
<h3 dir="auto">Expected Behavior</h3>
<p dir="auto">The second method should access the imported value correctly as it is not shadowed in its scope.</p>
<h3 dir="auto">Current Behavior</h3>
<p dir="auto">The second method yields a ReferenceError on the imported value :</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="ReferenceError: bar is not defined
    at Foo.logImportedBar"><pre class="notranslate"><code class="notranslate">ReferenceError: bar is not defined
    at Foo.logImportedBar
</code></pre></div>
<h3 dir="auto">Possible Solution</h3>
<p dir="auto">In the generated code, the second method should contain <code class="notranslate">console.log(_bar2.default)</code> instead of <code class="notranslate">console.log(bar)</code>.</p>
<h3 dir="auto">Your Environment</h3>
<table role="table">
<thead>
<tr>
<th>software</th>
<th>version(s)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Babel</td>
<td>v6.24.1</td>
</tr>
<tr>
<td>node</td>
<td>v8.1.3</td>
</tr>
<tr>
<td>yarn</td>
<td>v0.27.5</td>
</tr>
<tr>
<td>Operating System</td>
<td>Linux 4.11.9-1-ARCH x86_64</td>
</tr>
</tbody>
</table>