39

I'm working on a react project (my first) and I've recently restructured my folder structure to make a bit more sense.

To make my life easier, within my component folders, I have an index.js file which looks like the following:

export * from './App';
export * from './Home';
export * from './PageWrapper';

(The idea was lifted from another StackOverflow Question)

In this case each of the files this index points to have a singular class export.

Now in my main application, I try and do something like:

import {Home, App} from './containers/index';
//or
import Home from './containers/index';

Nothing works. I've found that if I separate them all out into individual lines pointing directly at the correct file, it works.

import Home from './containers/Home';
import App from './containers/App';

So is it possible to import multiple classes the way I'm doing it, and I'm just not seeing it? Do I perhaps need to name them all (App as App)? Or is this simply an enforced limitation?

Community
  • 1
  • 1
cdutson
  • 740
  • 2
  • 6
  • 13

4 Answers4

64

You can export like this:

import App from './App';
import Home from './Home';
import PageWrapper from './PageWrapper';

export {
    App,
    Home,
    PageWrapper
}

Then, you can import like this wherever you need it:

import { App, PageWrapper } from './index' //or similar filename

...

You can read more about import and export here. I also answered a similar question here.

Mario Tacke
  • 5,378
  • 3
  • 30
  • 49
  • Thank you! This is exactly what I needed. – cdutson Jan 07 '16 at 18:03
  • No problem. By the way, if you export your components in an `index.js`, you can easily import them without explicitly targeting the file. For example, you have a folder `components`, in there you have `Home.jsx`, `App.jsx` and `index.js`. Wherever you import, just target `components` like this `import { Home, App } from './components';` – Mario Tacke Jan 07 '16 at 18:10
  • but in this case, we need to give relative path to `index.js` file, where we need to import!!! – TalESid Oct 27 '18 at 04:50
  • node.js is trying to look for index.js first, so you don't have to explicitly put that into the path – Alex Link Nov 22 '18 at 13:17
  • But It is throwing `SyntaxError: The requested module does not provide an export named 'default'` when placing similar code in `index.js` – Sm Srikanth Jun 09 '20 at 18:56
7

I use export that looks something like this. In react it worked well

export {default as PublicRoute} from './PublicRoute';
export {default as PrivateRoute} from './PrivateRoute';

Then, you can import like this wherever you need:

import {PublicRoute, PrivateRoute} from './config/router';
...
Matt Nguyen
  • 71
  • 1
  • 4
  • but answer above (@mario's) is more neat and clearer way to do so i guess, anyways good alternate :) – Pardeep Jain Jul 04 '17 at 11:37
  • Thank @PardeepJain support. I also use your solution in some cases. I applied it in the build tool setup with my nodejs server code. When I use my solution, the **gulp-strip-debug** plugin generates an unexpected token error. I had to reuse the solution just like that of (@mario's) and you proposed as a replacement solution. And my build tool results are not interrupted :)! – Matt Nguyen Jul 06 '17 at 09:34
1

you can use this method 

import * React from 'react'
Balaji.J.B
  • 618
  • 7
  • 14
0

One can have multiple named exports per file then import the specific exports by surrounding by braces. The name of the imported module has to be the same as the name of the exported module.

import {Something, Somethingelse} from './utility.js'

One can also import all exports as the following:

import * as bundled from './utility.js'

Abhishek Kumar
  • 955
  • 11
  • 11