title: Import from folder through index.js
body: <p>In my React project (w/ Webpack), my folder structure is as follows:</p>
  
  <pre><code>├── myfile.js 
  ├── Report
      ├── index.js
  </code></pre>
  
  <p>Based on my <a href="https://stackoverflow.com/a/44092481/1493867">research</a>, I should be able to import the <code>Report</code> module in <code>myfile.js</code> thus:</p>
  
  <pre><code>import { Report } from './Report';
  </code></pre>
  
  <p>But that doesn't work. I got the error:</p>
  
  <blockquote>
    <p>Attempted import error: 'Report' is not exported from './Report'.</p>
  </blockquote>
  
  <p>This does, however. </p>
  
  <pre><code>import { Report } from './Report/index';
  </code></pre>
  
  <p>My <code>Report/index.js</code> has the following export:</p>
  
  <pre><code>// export default class Report extends Component { // this was a typo
  export class Report extends Component {    
    // etc
  }
  </code></pre>
  
  <p>How can I solve this or at least troubleshoot it? </p>
  
  <p>By the way, I originally used default export/import, but I changed to a named one in hope that it would make a difference. It doesn't. </p>
  
  <p><strong>Update.</strong> I'm really sorry, but this post originally and mistakenly had <code>export default</code> in <code>index.js</code>. That is not what is actually in the file, and it might have led some of the answerers down the wrong path. I did change that to just <code>export</code> when I changed the import from <code>import Report</code> to <code>import { Report }</code> as I said above. So the import and export should have matched in either case (named or default), and neither worked.</p>