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.

Improve this question
2
  • 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). Commented Nov 20, 2018 at 1: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. Commented Nov 20, 2018 at 3:49

5 Answers 5

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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.

Improve this answer

6 Comments

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 I made a demo for you. The named export works as expected.
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 Well, please provide a demo on CodeSandbox? I'll try to help you figure it out
I've figured it out, thank you. Your demo helped convince me that it had to do w/ my local environment. See my answer.
|
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';
Improve this answer

1 Comment

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.
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.

Improve this answer

Comments

1

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

import { Report } from './Report/';
Improve this answer

1 Comment

This works in my case. Can you please explain why slash matters?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.