<h2 dir="auto">Bug Report</h2>
<p dir="auto">I'm use <a href="https://github.com/AlexGilleran/jsx-control-statements">jsx-control-statement@4.1.0</a> plugin.<br>
Production build is work properly but when I start development mode I have error <code class="notranslate">undefined is not a function</code></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/3369304/111654069-79906c00-8819-11eb-855e-6aa094b053b6.png"><img src="https://user-images.githubusercontent.com/3369304/111654069-79906c00-8819-11eb-855e-6aa094b053b6.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">In the source code of my development build I see this</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/3369304/111654253-a3e22980-8819-11eb-88e6-d80818d4ecad.png"><img src="https://user-images.githubusercontent.com/3369304/111654253-a3e22980-8819-11eb-88e6-d80818d4ecad.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>Expected behavior</strong><br>
Development build work properly</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="- Babel version(s): v7.13.10
- Node/npm version: Node 13
- Monorepo: no
- How you are using Babel: webpack"><pre class="notranslate"><code class="notranslate">- Babel version(s): v7.13.10
- Node/npm version: Node 13
- Monorepo: no
- How you are using Babel: webpack
</code></pre></div>
<p dir="auto"><strong>Additional context</strong></p>
<p dir="auto">I found similar issue with <a href="https://github.com/airbnb/babel-plugin-inline-react-svg/issues/91" data-hovercard-type="issue" data-hovercard-url="/airbnb/babel-plugin-inline-react-svg/issues/91/hovercard">babel-plugin-inline-react-svg</a></p>
<p dir="auto">I've run into this a couple of times recently and haven't been able to figure out why it happens. I put together this small test case:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var className = `${prefix}__header`;

var obj = {};
obj[className] = true;
obj[className + '--open'] = true;
obj[className + '--active'] = true;

// This works
var classes = cx(obj);

// This doesn't
var classes = cx({
  [className]: true,
  [className + '--open']: true,
  [className + '--active']: true
});"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-s1">className</span> <span class="pl-c1">=</span> <span class="pl-s">`<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">prefix</span><span class="pl-kos">}</span></span>__header`</span><span class="pl-kos">;</span>

<span class="pl-k">var</span> <span class="pl-s1">obj</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-s1">obj</span><span class="pl-kos">[</span><span class="pl-s1">className</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span><span class="pl-kos">;</span>
<span class="pl-s1">obj</span><span class="pl-kos">[</span><span class="pl-s1">className</span> <span class="pl-c1">+</span> <span class="pl-s">'--open'</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span><span class="pl-kos">;</span>
<span class="pl-s1">obj</span><span class="pl-kos">[</span><span class="pl-s1">className</span> <span class="pl-c1">+</span> <span class="pl-s">'--active'</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span><span class="pl-kos">;</span>

<span class="pl-c">// This works</span>
<span class="pl-k">var</span> <span class="pl-s1">classes</span> <span class="pl-c1">=</span> <span class="pl-en">cx</span><span class="pl-kos">(</span><span class="pl-s1">obj</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">// This doesn't</span>
<span class="pl-k">var</span> <span class="pl-s1">classes</span> <span class="pl-c1">=</span> <span class="pl-en">cx</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-kos">[</span><span class="pl-s1">className</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-s1">className</span> <span class="pl-c1">+</span> <span class="pl-s">'--open'</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-s1">className</span> <span class="pl-c1">+</span> <span class="pl-s">'--active'</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-kos">;</span></pre></div>
<p dir="auto">With the error</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Parse Error: Duplicate data property in object literal not allowed in strict mode"><pre class="notranslate"><code class="notranslate">Parse Error: Duplicate data property in object literal not allowed in strict mode
</code></pre></div>