9

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.

bongbang
  • 1,610
  • 4
  • 18
  • 34
  • 1
    since you are exporting it as default, you should just import it directly: `import Report from './Report';`, curly braces would be for named imports (not using default). – Austin Greco Nov 20 '18 at 01:06
  • @AustinGreco Contrary to my erroneousness post (since corrected), I was actually *not* exporting as default. I switched to a named export when I switched to a bracketed import. In other words, the word `default` was really not in my code after the switch. My apologies. – bongbang Nov 20 '18 at 03:49

5 Answers5

16

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.

You Nguyen
  • 9,961
  • 4
  • 26
  • 52
bongbang
  • 1,610
  • 4
  • 18
  • 34
5

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.

You Nguyen
  • 9,961
  • 4
  • 26
  • 52
  • I'm really sorry, but the word `default` shouldn't have been there in my post, as it wasn't in the file. The conclusion you reached in your update is reasonable, but that's not it. See my update. (I originally had default import and export, and then I changed it to named import and export. Same problem.) – bongbang Nov 20 '18 at 03:37
  • @bongbang I made a demo for you. The `named export` works as expected. – You Nguyen Nov 20 '18 at 03:45
  • Thanks for the demo, but I'm really stumped. As you said, the two lines should be equivalent, but they are not to me. One works, and the other doesn't. And the only difference is really `/index` in `myfile.js`. (Nothing is being changed in `index.js`, I swear.) Is there something I can do w/ the version that does work in order to figure out why the other doesn't? – bongbang Nov 20 '18 at 04:08
  • @bongbang Well, please provide a demo on CodeSandbox? I'll try to help you figure it out – You Nguyen Nov 20 '18 at 04:11
  • I've figured it out, thank you. Your demo helped convince me that it had to do w/ my local environment. See my answer. – bongbang Nov 20 '18 at 05:32
  • Is this syntax (leaving out 'index.js') only for nodejs modules? Does it work with plain browser javascript modules? – Kernel James Jan 18 '22 at 03:08
2

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';
oriont
  • 684
  • 2
  • 10
  • 25
  • Thank you, but that's not it. I was actually using named export. The word `default` was in my post (since corrected), but it's not actually in `index.js`. – bongbang Nov 20 '18 at 03:43
1

If you have just restructured your app to use index.js then you will need to restart node in order for it to work.

Mike Thomson
  • 141
  • 2
  • 8
1

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

import { Report } from './Report/';
Meir
  • 516
  • 4
  • 19