Import from folder through index.js

Question

In my React project (w/ Webpack), my folder structure is as follows:

├── myfile.js 
├── Report
    ├── index.js

Based on my research, I should be able to import the Report module in myfile.js thus:

import { Report } from './Report';

But that doesn't work. I got the error:

Attempted import error: 'Report' is not exported from './Report'.

This does, however.

import { Report } from './Report/index';

My Report/index.js has the following export:

// export default class Report extends Component { // this was a typo
export class Report extends Component {    
  // etc
}

How can I solve this or at least troubleshoot it?

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.

Update. I'm really sorry, but this post originally and mistakenly had export default in index.js. 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 export when I changed the import from import Report to import { Report } as I said above. So the import and export should have matched in either case (named or default), and neither worked.

Answer 1

SOLUTION: Restart the developmental server.

---

EXPLANATION

I've figured it out, somewhat. In short, all I had to do was restart the developmental server.

Details for the curious. Before I decided to make Report a folder, it was a file in the same folder as myfile.js.

├── myfile.js 
├── Report.js

I had a developmental server running locally, and everything was working just fine.

Then I created a new folder Report and moved Report.js into it using git mv Report.js Report/index.js all the while the developmental server was still running and it stopped working.

I'm not sure why that didn't work exactly (I seem to recall a different error message than the one excerpted in my post), but I thought my default export was the problem, and set about changing it.

The developmental server of course recognized the changes I made to the files, but apparently it still thought the deleted Report.js still existed, whether as a blank file or an old version or whatever. With import { Report } from './Report'; it would fetch or try to fetch the old Report.js and failed, whereas with import { Report } from './Report/index'; knew exactly where to go and worked as expected.

Once restarted, the server no longer sees the phantasmic Report.js and thus searches for Report/index.js next, as it's supposed to. Every thing works now, including w/ the original default export/import.

Answer 2

Since your file name is index.js, these two lines are equivalent:

import { Report } from './Report';  // by default, the module system will look for the index.js file inside a folder
import { Report } from './Report/index';

Hence, there is no reason for the second approach worked but the first one didn't

---

In your case, because you're using the default export rather than named export, in order to use the exported module, these both ways will work for you:

import Report from './Report'
import Report from './Report/index';

---

UPDATE

Attempted import error: 'Report' is not exported from './Report'.

This error is telling us that we're trying to import a named export module but the module system can't find any named export modules with the name Report. It's obvious because we're using default export rather than named export.

---

UPDATE

This is a working demo: https://codesandbox.io/s/m7vp982m2p You can use it as a reference, then looking back to your code and you will figure out why your code doesn't work.

Answer 3

It looks like you are not actually exporting an Object from your class, which means you don't need the braces like this:

import { Report } from './Report';

Like Austin Greco said, you should remove the braces, because you are only exporting one thing, which is the class Report.

import Report from './Report';

Answer 4

you just needed to add a slash "/" after 'Report like this:

import { Report } from './Report/';