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
– Jagrati, Commented May 1, 2020 at 15:48
This is how I'm exporting my component in newsBlock.js: export default NewsBlock; — HichiHachi
– HichiHachi, Commented May 1, 2020 at 15:51
Does this answer your question? node.js es6 export / import with index.js — antoniom
– antoniom, Commented May 1, 2020 at 16:00

antoniom · Accepted Answer · 2020-05-01 15:53:40Z

2

On your index.js file you should try

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

answered May 1, 2020 at 15:53

antoniom

3,2612 gold badges41 silver badges58 bronze badges

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

Comments

Sandy · Accepted Answer · 2020-05-01 16:20:53Z

1

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.

answered May 1, 2020 at 16:20

Sandy

11.7k27 gold badges84 silver badges130 bronze badges

Comments

Arun Kumar · Accepted Answer · 2020-05-01 15:35:02Z

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 1, 2020 at 15:35

Arun Kumar

3554 silver badges10 bronze badges

Comments

HichiHachi · Accepted Answer · 2020-05-01 16:30:36Z

0

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/';

answered May 1, 2020 at 16:30

HichiHachi

4913 gold badges8 silver badges21 bronze badges

Collectives™ on Stack Overflow

React, how to import components from folder index.js

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related