Simplify React Components Import

Question

I try to simplify my Components import, from:

import Component1 from './components/Component1'
import Component2 from './components/Component2'

To something like that:

import {Component1, Component2} from './components/'

I have tried to create an index.js file into components directory (following this post import modules from files in directory):

export * from 'Component1';
export * from 'Component2';

But I still have a "Module not found" error. Any clue ?

Thanks, Orb

Yury Tarabanko · Accepted Answer · 2017-06-13T11:10:29.097

3

You need to add a dot to indicate it is a local file, not an npm-published module. Change your exports line like so

export * from './Component1';

UPD To resolve next issue with named import you need to give a name to default export from Component1.js file

export Component1 from './Component1';

Follow this answer

edited Jun 13 '17 at 11:10

answered Jun 13 '17 at 10:50

Yury Tarabanko

44,270
9
84
98

Thanks. I still have an error actually but not the same. `'./components/' does not contain an export named 'Component1'.` – Orboo Jun 13 '17 at 11:05
@Orboo It's because your `Component1.js` exports component as default. You need `export Component1 from './Component1` Follow this anwer https://stackoverflow.com/a/31402500/351705 – Yury Tarabanko Jun 13 '17 at 11:08
`export {default as Component1} from './Component1'` works well (thx) but `export Component1 from './Component1';` generate a syntax error. – Orboo Jun 13 '17 at 11:19
It depends on your babel config. Compare [es2015,stage-0](https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Cstage-0&targets=&browsers=&builtIns=false&debug=false&code=export%20Component1%20from%20'.%2FComponent1'%3B) and [es2015](https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015&targets=&browsers=&builtIns=false&debug=false&code=export%20Component1%20from%20'.%2FComponent1'%3B) – Yury Tarabanko Jun 13 '17 at 11:23

score 0 · Answer 2 · answered Jun 13 '17 at 11:00

Are you sure the path is correct? Try to specify the absolute path like:

import Component1 from '/home/your_username/components/Component1' import Component2 from '/home/your_username/components/Component2'

You can see the correct path of your directory from terminal with the command "pwd".

Be sure to have the access to the directory and file. You can try to run the program as root.

score 0 · Answer 3 · answered Jun 13 '17 at 11:46

While exporting components from your Component1 and Component2 instead of *, you should export it as objects -

//In Component1.js(x)
export { Component1 };

and

//In Component2.js(x)
export { Component2 };

With this you should be able to import like:

import { Component1 } from '...';
import { Component2 } from '...';

score 0 · Answer 4 · answered Jun 13 '17 at 20:19

Yeah I do the same thing with my imports and it's a lot nicer when they are being exported from the same file. Here's an example of how I achieve this:

components/index.js

import Component1 from './Component1';
import Component2 from './Component2';

module.exports = {
    Component1,
    Component2
};

Then to import them

import { Component1, Component2 } from './components';

If you are using Webpack, check out webpack resolve to get rid of your relative paths.

Example using Webpack resolve

//Will work at any nested level
import { Component1, Component2 } from 'components';

And just for clarification, Component1 and Component2 should be using a default export

export default class Component1 extends React.Component {...}

or

var Component1 = createReactClass({...});
module.exports = Component1;

Simplify React Components Import

4 Answers4