<p dir="auto">NOTE: this seems to be fixed in 7.x either intentionally or from refactorings. I don't know the maintenance status of 6.x, so I'm opening this anyhow.</p>
<p dir="auto">Choose one: is this a bug report or feature request? <strong>Bug</strong></p>
<h3 dir="auto">Input Code</h3>
<p dir="auto">Repro repo: <a href="https://github.com/FLGMwt/babel-cjs-bug">https://github.com/FLGMwt/babel-cjs-bug</a></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export const withExport = () =&gt; null;
const withoutExport = () =&gt; null;

console.log({
  withExport: withExport.name, // should be 'withExport', is ''
  withoutExport: withoutExport.name, // should be 'withoutExport', *is* 'withoutExport'
});
"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-en">withExport</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">null</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-en">withoutExport</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">null</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-kos">{</span>
  <span class="pl-c1">withExport</span>: <span class="pl-en">withExport</span><span class="pl-kos">.</span><span class="pl-c1">name</span><span class="pl-kos">,</span> <span class="pl-c">// should be 'withExport', is ''</span>
  <span class="pl-c1">withoutExport</span>: <span class="pl-en">withoutExport</span><span class="pl-kos">.</span><span class="pl-c1">name</span><span class="pl-kos">,</span> <span class="pl-c">// should be 'withoutExport', *is* 'withoutExport'</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<h3 dir="auto">Babel/Babylon Configuration (.babelrc, package.json, cli command)</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;plugins&quot;: [&quot;transform-es2015-modules-commonjs&quot;]
}"><pre class="notranslate"><span class="pl-kos">{</span>
  <span class="pl-s">"plugins"</span>: <span class="pl-kos">[</span><span class="pl-s">"transform-es2015-modules-commonjs"</span><span class="pl-kos">]</span>
<span class="pl-kos">}</span></pre></div>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;name&quot;: &quot;babel-export-bug&quot;,
  &quot;version&quot;: &quot;1.0.0&quot;,
  &quot;main&quot;: &quot;index.js&quot;,
  &quot;license&quot;: &quot;MIT&quot;,
  &quot;dependencies&quot;: {
    &quot;babel-core&quot;: &quot;^6.26.0&quot;,
    &quot;babel-plugin-transform-es2015-modules-commonjs&quot;: &quot;^6.26.0&quot;
  }
}"><pre class="notranslate"><span class="pl-kos">{</span>
  <span class="pl-s">"name"</span>: <span class="pl-s">"babel-export-bug"</span><span class="pl-kos">,</span>
  <span class="pl-s">"version"</span>: <span class="pl-s">"1.0.0"</span><span class="pl-kos">,</span>
  <span class="pl-s">"main"</span>: <span class="pl-s">"index.js"</span><span class="pl-kos">,</span>
  <span class="pl-s">"license"</span>: <span class="pl-s">"MIT"</span><span class="pl-kos">,</span>
  <span class="pl-s">"dependencies"</span>: <span class="pl-kos">{</span>
    <span class="pl-s">"babel-core"</span>: <span class="pl-s">"^6.26.0"</span><span class="pl-kos">,</span>
    <span class="pl-s">"babel-plugin-transform-es2015-modules-commonjs"</span>: <span class="pl-s">"^6.26.0"</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="babel test.js | node"><pre class="notranslate">babel test.js <span class="pl-k">|</span> node</pre></div>
<h3 dir="auto">Expected Behavior</h3>
<p dir="auto">Output of <code class="notranslate">babel test.js | node</code> should be</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{ withExport: 'withExport', withoutExport: 'withoutExport' }"><pre class="notranslate"><span class="pl-kos">{</span> <span class="pl-c1">withExport</span>: <span class="pl-s">'withExport'</span><span class="pl-kos">,</span> <span class="pl-c1">withoutExport</span>: <span class="pl-s">'withoutExport'</span> <span class="pl-kos">}</span></pre></div>
<p dir="auto">Arrow functions should have their <code class="notranslate">.name</code> property defined by declarations, as demonstrated with the <code class="notranslate">withoutExport</code> function name.</p>
<h3 dir="auto">Current Behavior</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{ withExport: '', withoutExport: 'withoutExport' }"><pre class="notranslate"><span class="pl-kos">{</span> <span class="pl-c1">withExport</span>: <span class="pl-s">''</span><span class="pl-kos">,</span> <span class="pl-c1">withoutExport</span>: <span class="pl-s">'withoutExport'</span> <span class="pl-kos">}</span></pre></div>
<p dir="auto">The arrow function that is <em>also</em> exported at the time of declaration is <em>not</em> given its name.</p>
<p dir="auto">This seems to be because the output of the transform disassociates the arrow function from the variable declaration by injecting a cascading assignment to the module-wrapping code:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Object.defineProperty(exports, &quot;__esModule&quot;, {
  value: true
});
const withExport = exports.withExport = () =&gt; null;
const withoutExport = () =&gt; null;"><pre class="notranslate"><span class="pl-v">Object</span><span class="pl-kos">.</span><span class="pl-en">defineProperty</span><span class="pl-kos">(</span><span class="pl-s1">exports</span><span class="pl-kos">,</span> <span class="pl-s">"__esModule"</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
  <span class="pl-c1">value</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">const</span> <span class="pl-s1">withExport</span> <span class="pl-c1">=</span> <span class="pl-s1">exports</span><span class="pl-kos">.</span><span class="pl-en">withExport</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">null</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-en">withoutExport</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">null</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">and I guess this turns the arrow function into an anonymous one.</p>
<h3 dir="auto">Possible Solution</h3>
<p dir="auto">Possible solutions:</p>
<ol dir="auto">
<li>Separate variable declaration from the <code class="notranslate">exports.withExport</code> assignment</li>
<li>Explicitly assign the <code class="notranslate">.name</code> property to the function in a separate statement</li>
<li>Don't fix and wait for babel 7.x</li>
</ol>
<p dir="auto">If we're capable of fixing this in 6.x, I'm happy to give it a shot : )</p>
<h3 dir="auto">Context</h3>
<p dir="auto">I was writing a tutorial for testing React apps using Enzyme. Building on create-react-app, I made some simple, stateless functional components and immediately exported them <a href="https://github.com/FLGMwt/enzyme-intro/blob/reproduce-nameless-arrow-function/src/App.js#L3">link</a>. Enzyme uses a jQuery-like selector syntax for traversing a DOM-like structure which accepts string keys for components. React derives these keys/component names from function names, which in this case was missing. When I try to find these components in the test <a href="https://github.com/FLGMwt/enzyme-intro/blob/reproduce-nameless-arrow-function/src/App.test.js#L11">like this</a>, I can't. (shows up as <code class="notranslate">&lt;Component /&gt;</code> instead of <code class="notranslate">&lt;SpyListItem /&gt;</code>)</p>
<p dir="auto">It's worth pointing out that this is only a problem for node-based unit tests. Dev tools use the same names to identify components, but those work in the browser usually since the <code class="notranslate">env</code> preset transforms arrow functions into <em>named</em> functions. The create-react-app config uses <code class="notranslate">node: 'current'</code>, which, unless current is &lt;=5.12, leaves arrows alone. After opening this, I'm gonna poke around <em>that</em> repo to see about pinning down the node env target.</p>
<p dir="auto">I can work around this by explicitly naming the component, naming the function, querying by object reference, or exporting differently, but since I'm trying to reach a beginner audience, I don't want to <em>have</em> to do anything exceptional.</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>^6.26.0</td>
</tr>
<tr>
<td>node</td>
<td>9.3.0</td>
</tr>
<tr>
<td>npm</td>
<td>5.6.0</td>
</tr>
<tr>
<td>Operating System</td>
<td>OSX</td>
</tr>
</tbody>
</table>
<p dir="auto">Choose one: is this a bug report or feature request?</p>
<p dir="auto">Bug</p>
<h3 dir="auto">Input Code</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export const f1 = function () {};
export const f2 = () =&gt; {};"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-en">f1</span> <span class="pl-c1">=</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-kos">}</span><span class="pl-kos">;</span>
<span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-en">f2</span> <span class="pl-c1">=</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-kos">}</span><span class="pl-kos">;</span></pre></div>
<h3 dir="auto">Babel Configuration (.babelrc, package.json, cli command)</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="--plugins transform-es2015-modules-commonjs"><pre class="notranslate"><code class="notranslate">--plugins transform-es2015-modules-commonjs
</code></pre></div>
<h3 dir="auto">Expected Behavior</h3>
<p dir="auto">To preserve inferred names of anonymous functions, I would expect:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// ...
const f1 = function () {};
exports.f1 = f1;
const f2 = () =&gt; {};
exports.f2 = f2;
// f1.name === 'f1'
// f2.name === 'f2'"><pre class="notranslate"><span class="pl-c">// ...</span>
<span class="pl-k">const</span> <span class="pl-en">f1</span> <span class="pl-c1">=</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-kos">}</span><span class="pl-kos">;</span>
<span class="pl-s1">exports</span><span class="pl-kos">.</span><span class="pl-c1">f1</span> <span class="pl-c1">=</span> <span class="pl-en">f1</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-en">f2</span> <span class="pl-c1">=</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-kos">}</span><span class="pl-kos">;</span>
<span class="pl-s1">exports</span><span class="pl-kos">.</span><span class="pl-c1">f2</span> <span class="pl-c1">=</span> <span class="pl-en">f2</span><span class="pl-kos">;</span>
<span class="pl-c">// f1.name === 'f1'</span>
<span class="pl-c">// f2.name === 'f2'</span></pre></div>
<h3 dir="auto">Current Behavior</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// ...
const f1 = exports.f1 = function () {};
const f2 = exports.f2 = () =&gt; {};
// f1.name === ''
// f2.name === ''"><pre class="notranslate"><span class="pl-c">// ...</span>
<span class="pl-k">const</span> <span class="pl-s1">f1</span> <span class="pl-c1">=</span> <span class="pl-s1">exports</span><span class="pl-kos">.</span><span class="pl-en">f1</span> <span class="pl-c1">=</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-kos">}</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">f2</span> <span class="pl-c1">=</span> <span class="pl-s1">exports</span><span class="pl-kos">.</span><span class="pl-en">f2</span> <span class="pl-c1">=</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-kos">}</span><span class="pl-kos">;</span>
<span class="pl-c">// f1.name === ''</span>
<span class="pl-c">// f2.name === ''</span></pre></div>
<h3 dir="auto">Context</h3>
<p dir="auto">Especially for arrow functions (since there is no explicitly named alternative), it would be very helpful to preserve the inferred function name.</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>6.24.1</td>
</tr>
<tr>
<td>node</td>
<td>7.3.0</td>
</tr>
<tr>
<td>npm</td>
<td>3.8.9</td>
</tr>
<tr>
<td>Operating System</td>
<td>Windows</td>
</tr>
</tbody>
</table>