React, how to import components from folder index.js

Question

I have a little component library I am trying to build out. So it made sense to put them in a folder and only import the ones I need or all at once if needed using the import * from folder.

It looks a little something like this.

 /sliceZone
 |--index.js
 |--newsBlock.js

This is how I'm exporting my component in newsBlock.js:

export default NewsBlock;

Inside my index.js in the sliceZone folder I have:

export { NewsBlock } from './newsBlock';

and inside the file Im working on I am trying to import it like:

import { NewsBlock } from './sliceZone';

But I'm getting the error in my terminal

warn "export 'NewsBlock' was not found in './sliceZone'

How do I export components from a index.js file?

How did you export the component from newsBlock.js? Coz if there is a named export the example should work. If there is a default export it won't work. — Jagrati, May 01 '20 at 15:48
This is how I'm exporting my component in newsBlock.js: export default NewsBlock; — HichiHachi, May 01 '20 at 15:51
Does this answer your question? [node.js es6 export / import with index.js](https://stackoverflow.com/questions/45174856/node-js-es6-export-import-with-index-js) — antoniom, May 01 '20 at 16:00

score 2 · Answer 1 · answered May 01 '20 at 15:53

2

On your index.js file you should try

export {default as NewsBlock} from './newsBlock';

answered May 01 '20 at 15:53

antoniom

3,143
1
37
53

score 1 · Answer 2 · answered May 01 '20 at 16:20

Whenever you have a default export, you need not destructure it in import statements. So if you have

export default NewBlock;

You can import it using

import NewsBlock from ./newsBlock;
import Anything from ./newsBlock;

Both above statements are valid. And NewsBlock and Anything imports will have NewsBlock.

If you export object as below

export NewsBlock;

Then you must destructure it to use.

import {NewsBlock} from ./newsBlock;

Not sure if it is something you are looking for, but just felt it is related information and may solve your issue.

score 0 · Answer 3 · answered May 01 '20 at 15:35

0

inside newsBlock.js you can write export default NewsBlock ; and you can import that from import { NewsBlock } from './sliceZone'; or import { NewsBlock } from './sliceZone/index';

answered May 01 '20 at 15:35

Arun Kumar

355
3
10

score 0 · Accepted Answer · answered May 01 '20 at 16:30

I managed to figure it out.

In index.js

import NewsBlock from './newsBlock';
//Anything else to import from the folder.

export { NewsBlock, /*Anything else to export*/ };

then when I import into another file I can use.

import { NewsBlock, /*Anything else*/ } from './sliceZone/';

React, how to import components from folder index.js

4 Answers4