Index.js module imports with webpack
<p>My code is organised as follows: </p>

<p><a href="https://i.stack.imgur.com/UtELN.png" rel="nofollow"><img src="https://i.stack.imgur.com/UtELN.png" alt="Folder hierarchy"></a></p>

<p>where, </p>

<p>Resources/ActionLog/Components/Layout.js </p>

<pre><code>import React from 'react';

export default class Layout extends React.Component {
    render() {
        return (
            &lt;p&gt;Test&lt;/p&gt;
        );
    }
}
</code></pre>

<p>Resources/ActionLog/Components/index.js</p>

<pre><code>export * from './Layout';
</code></pre>

<p>Resources/ActionLog/index.js</p>

<pre><code>import React from 'react';
import ReactDOM from 'react-dom';

import Layout from './Components'; // &lt;--- ISSUE HERE.

const app = document.getElementById('app');
ReactDOM.render(
    &lt;Layout/&gt;,
    app
);
</code></pre>

<p>Why does <code>Layout</code> not get imported using this setup?? </p>

<p>If i change the line to read, </p>

<p><code>import Layout from './Components/Layout';</code></p>

<p>it works fine, but otherwise <code>Layout</code> is always undefined! Even when if i try, </p>

<p><code>import Layout from './Components/index';</code> </p>

<p>I am using webpack as my module bundler, and have achieved something similar before, I just don't see why/how this is different.. </p>