<blockquote>
<p dir="auto">Issue originally made by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/pgbross/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/pgbross">@pgbross</a></p>
</blockquote>
<h3 dir="auto">Bug information</h3>
<ul dir="auto">
<li><strong>Babel version:</strong> 6.2.0</li>
<li><strong>Node version:</strong> 5.1.0</li>
<li><strong>npm version:</strong> 3.3.12</li>
</ul>
<h3 dir="auto">Options</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
  &quot;plugins&quot;: [ &quot;babel-plugin-transform-es2015-computed-properties&quot;]
}"><pre class="notranslate"><code class="notranslate">{
  "plugins": [ "babel-plugin-transform-es2015-computed-properties"]
}
</code></pre></div>
<h3 dir="auto">Input code</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="'use strict';

let _ks = '';
export let MyObj = {
  get [_ks]() {
    return 'somevalue';
  },
  get myValue(){
    return 'someothervalue';
  }
};"><pre class="notranslate"><code class="notranslate">'use strict';

let _ks = '';
export let MyObj = {
  get [_ks]() {
    return 'somevalue';
  },
  get myValue(){
    return 'someothervalue';
  }
};
</code></pre></div>
<h3 dir="auto">Description</h3>
<p dir="auto">Compiling this with<br>
babel example.js</p>
<p dir="auto">produces</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="'use strict';

var _myValue, _MyObj, _mutatorMap;

function _defineEnumerableProperties(obj, descs) { for (var key in descs) { var desc = descs[key]; desc.configurable = desc.enumerable = true; if (&quot;value&quot; in desc) desc.writable = true; Object.defineProperty(obj, key, desc); } return obj; }

let _ks = '';
export let MyObj = (_MyObj = {}, _mutatorMap = {}, _mutatorMap[_ks] = _mutatorMap[_ks] || {}, _mutatorMap[_ks].get = function () {
  return 'somevalue';
}, _myValue = myValue, _mutatorMap[_myValue] = _mutatorMap[_myValue] || {}, _mutatorMap[_myValue].get = function () {
  return 'someothervalue';
}, _defineEnumerableProperties(_MyObj, _mutatorMap), _MyObj);
"><pre class="notranslate"><code class="notranslate">'use strict';

var _myValue, _MyObj, _mutatorMap;

function _defineEnumerableProperties(obj, descs) { for (var key in descs) { var desc = descs[key]; desc.configurable = desc.enumerable = true; if ("value" in desc) desc.writable = true; Object.defineProperty(obj, key, desc); } return obj; }

let _ks = '';
export let MyObj = (_MyObj = {}, _mutatorMap = {}, _mutatorMap[_ks] = _mutatorMap[_ks] || {}, _mutatorMap[_ks].get = function () {
  return 'somevalue';
}, _myValue = myValue, _mutatorMap[_myValue] = _mutatorMap[_myValue] || {}, _mutatorMap[_myValue].get = function () {
  return 'someothervalue';
}, _defineEnumerableProperties(_MyObj, _mutatorMap), _MyObj);

</code></pre></div>
<p dir="auto">Note the assignment <code class="notranslate">_myValue = myValue</code> is referencing a non-existant variable and will cause an exception.</p>
<p dir="auto">If I reverse the order of the computed and non-computed property in the example.js, it produces a version of the code without the problem.</p>
<p dir="auto">--philip</p>
<blockquote>
<p dir="auto">Issue originally made by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/agentme/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/agentme">@agentme</a></p>
</blockquote>
<h3 dir="auto">Bug information</h3>
<ul dir="auto">
<li><strong>Babel version:</strong> 6.6.4</li>
<li><strong>Node version:</strong> 5.6.0</li>
<li><strong>npm version:</strong> 3.7.3</li>
</ul>
<h3 dir="auto">Options</h3>
<p dir="auto">.babelrc</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
  &quot;presets&quot;: [&quot;es2015&quot;]
}"><pre class="notranslate"><code class="notranslate">{
  "presets": ["es2015"]
}
</code></pre></div>
<h3 dir="auto">Input code</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="var obj = {
  [&quot;a&quot;]: 5,
  set b(x) { console.log('set b', x); }
};

obj.b = 55;"><pre class="notranslate"><code class="notranslate">var obj = {
  ["a"]: 5,
  set b(x) { console.log('set b', x); }
};

obj.b = 55;
</code></pre></div>
<h3 dir="auto">Description</h3>
<p dir="auto">Trying to run the code gives "ReferenceError: b is not defined" at runtime. The code is transpiled to the following:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&quot;use strict&quot;;

var _b, _obj, _mutatorMap;

function _defineEnumerableProperties(obj, descs) { for (var key in descs) { var desc = descs[key]; desc.configurable = desc.enumerable = true; if (&quot;value&quot; in desc) desc.writable = true; Object.defineProperty(obj, key, desc); } return obj; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var obj = (_obj = {}, _defineProperty(_obj, &quot;a&quot;, 5), _b = b, _mutatorMap = {}, _mutatorMap[_b] = _mutatorMap[_b] || {}, _mutatorMap[_b].set = function (x) {
  console.log('set b', x);
}, _defineEnumerableProperties(_obj, _mutatorMap), _obj);

obj.b = 55;"><pre class="notranslate"><code class="notranslate">"use strict";

var _b, _obj, _mutatorMap;

function _defineEnumerableProperties(obj, descs) { for (var key in descs) { var desc = descs[key]; desc.configurable = desc.enumerable = true; if ("value" in desc) desc.writable = true; Object.defineProperty(obj, key, desc); } return obj; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var obj = (_obj = {}, _defineProperty(_obj, "a", 5), _b = b, _mutatorMap = {}, _mutatorMap[_b] = _mutatorMap[_b] || {}, _mutatorMap[_b].set = function (x) {
  console.log('set b', x);
}, _defineEnumerableProperties(_obj, _mutatorMap), _obj);

obj.b = 55;
</code></pre></div>
<p dir="auto">Now if we change the input code to have the setter be a computed property too (<code class="notranslate">set ["b"](x) {</code>), then the transpilation output contains this line instead:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="var obj = (_obj = {}, _defineProperty(_obj, &quot;a&quot;, 5), _b = &quot;b&quot;, _mutatorMap = {}, _mutatorMap[_b] = _mutatorMap[_b] || {}, _mutatorMap[_b].set = function (x) {"><pre class="notranslate"><code class="notranslate">var obj = (_obj = {}, _defineProperty(_obj, "a", 5), _b = "b", _mutatorMap = {}, _mutatorMap[_b] = _mutatorMap[_b] || {}, _mutatorMap[_b].set = function (x) {
</code></pre></div>
<p dir="auto">Notice <code class="notranslate">_b = b</code> was in the original output, and <code class="notranslate">_b = "b"</code> in this one. The issue is that the computed-properties plugin is not quoting the identifier if necessary. The plugin probably needs some logic similar to <a href="https://github.com/AgentME/babel/blob/b2aecd4320d131d6cb5ee086804042a21335962f/packages/babel-plugin-transform-es2015-duplicate-keys/src/index.js#L3">this logic in the duplicate-keys plugin</a>.</p>
<p dir="auto">Note that this above issue can affect users who aren't using computed properties in their code, because the duplicate-keys plugin internally transforms duplicate properties into computed properties.</p>