<p dir="auto">This just tripped me but I'm not sure if it's intended behavior. Feel free to close if it's not an issue.</p>
<p dir="auto">Basically I re-export a few functions in my lib's <code class="notranslate">index.js</code>:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export { default as DragDropContext } from './DragDropContext';
export { default as DragLayer } from './DragLayer';
export { default as DragSource } from './DragSource';
export { default as DropTarget } from './DropTarget';"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-kos">{</span> <span class="pl-s1">default</span> <span class="pl-k">as</span> <span class="pl-v">DragDropContext</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./DragDropContext'</span><span class="pl-kos">;</span>
<span class="pl-k">export</span> <span class="pl-kos">{</span> <span class="pl-s1">default</span> <span class="pl-k">as</span> <span class="pl-v">DragLayer</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./DragLayer'</span><span class="pl-kos">;</span>
<span class="pl-k">export</span> <span class="pl-kos">{</span> <span class="pl-s1">default</span> <span class="pl-k">as</span> <span class="pl-v">DragSource</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./DragSource'</span><span class="pl-kos">;</span>
<span class="pl-k">export</span> <span class="pl-kos">{</span> <span class="pl-s1">default</span> <span class="pl-k">as</span> <span class="pl-v">DropTarget</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./DropTarget'</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">In my app, I import them:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { DragLayer } from 'react-dnd';"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">DragLayer</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react-dnd'</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">I just realized that this assigns them implicit context of <code class="notranslate">index.js</code>'s <code class="notranslate">exports</code> object because when I use them later, they are invoked “on it”:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export default DragLayer(...)"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-v">DragLayer</span><span class="pl-kos">(</span>...<span class="pl-kos">)</span></pre></div>
<p dir="auto">becomes</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="exports['default']) = _reactDnd.DragLayer(...)"><pre class="notranslate"><span class="pl-s1">exports</span><span class="pl-kos">[</span><span class="pl-s">'default'</span><span class="pl-kos">]</span><span class="pl-kos">)</span> <span class="pl-c1">=</span> <span class="pl-s1">_reactDnd</span><span class="pl-kos">.</span><span class="pl-en">DragLayer</span><span class="pl-kos">(</span>...<span class="pl-kos">)</span></pre></div>
<p dir="auto">and thus <code class="notranslate">this</code> inside <code class="notranslate">DragLayer</code> points to <code class="notranslate">exports</code> in <code class="notranslate">index.js</code>.</p>
<p dir="auto">How do I solve this?</p>
<p dir="auto">Currently when an <code class="notranslate">import</code> statement is used the imported items are stored in a object, is it possible to store them in own variables?</p>
<p dir="auto">For instance, this snippet:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import {b} from 'foo';
b();"><pre class="notranslate"><code class="notranslate">import {b} from 'foo';
b();
</code></pre></div>
<p dir="auto">is compiled to:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="...
_b.b();"><pre class="notranslate"><code class="notranslate">...
_b.b();
</code></pre></div>
<p dir="auto">For import default it's even worse:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import b from 'foo';
b();
↓
...
_b2['default']();"><pre class="notranslate"><code class="notranslate">import b from 'foo';
b();
↓
...
_b2['default']();
</code></pre></div>
<p dir="auto">This has bad performance consequences as a function call like this works slower than a normal call — <code class="notranslate">b()</code>: <a href="http://jsperf.com/obj-default-vs-fn" rel="nofollow">http://jsperf.com/obj-default-vs-fn</a></p>