export default vs module.exports differences : <p>This works:</p>

<pre><code>import {bar} from './foo';
bar();

// foo.js
module.exports = {
 bar() {}
}
</code></pre>

<p>And this works:</p>

<pre><code>import foo from './foo';
foo.bar();

// foo.js
export default {
 bar() {}
}
</code></pre>

<p>So why doesn't this work?</p>

<pre><code>import {bar} from './foo';
bar();

// foo.js
export default {
 bar() {}
}
</code></pre>

<p>It throws <code>TypeError: (0 , _foo.bar) is not a function</code>.</p>
