title: ES6 modules import is undefined
body: <p>I'm trying to figure out an issue I have with ES6 modules import.</p>
  
  <p>This is a very simplified version of what I'm attempting to do. My current file structure is much more complicated with nested folders.</p>
  
  <p>I have 2 ReactJS components:</p>
  
  <pre><code>/buttons
    /MyComponent1.js
    /index.js
  /texts
    /MyComponent2.js
    /index.js
  
  /index.js
  </code></pre>
  
  <p>My files look something like this:</p>
  
  <p>I'm importing the <code>MyComponent2</code> from the root <code>index.js</code> file which is the entry-point of my package.</p>
  
  <p><strong>MyComponent1.js</strong></p>
  
  <pre><code>import MyComponent2 from '../../';
  
  export default () =&gt; (
    &lt;div&gt;&lt;MyComponent2 /&gt;&lt;/div&gt;
  );
  </code></pre>
  
  <p><strong>MyComponent2.js</strong></p>
  
  <pre><code>export default () =&gt; (
    &lt;div&gt;Hello world&lt;/div&gt;
  );
  </code></pre>
  
  <p>My <code>buttons/index.js</code> and <code>texts/index.js</code> files export all components in their own folder:</p>
  
  <p><strong>buttons/index.js</strong></p>
  
  <pre><code>export { default as MyComponent1 } from './MyComponent1'; 
  </code></pre>
  
  <p><strong>texts/index.js</strong></p>
  
  <pre><code>export { default as MyComponent2 } from './MyComponent2';
  </code></pre>
  
  <p>And my root <code>index.js</code> export all my folders to make them publicly available. It's my entry-point:</p>
  
  <pre><code>export * from './buttons';
  export * from './texts';
  </code></pre>
  
  <p>So when I import <code>MyComponent2</code> in <code>MyComponent1</code> from the root <code>index.js</code> file, it's <code>undefined</code>. When I import it from <code>./MyComponent2.js</code>, it's defined. When I import the entire package in another project and import <code>MyComponent2</code> from the root <code>index.js</code> file, it's defined.</p>
  
  <p>It's mind-blowing and I don't understand why I can't import <code>MyComponent2</code> from the root <code>index.js</code> file.</p>
  
  <p>I need to do that because I have a set of hundred of components nested in different folder and I want to make them all available from this entry-point file.</p>
  
  <p>Can someone tell me what is happening and how to make this possible?</p>
  
  <p>Thanks</p>