Question

48

Is it possible to do multiple class imports with ES6/Babel?

rated 0 times [ 54] [ 6] / answers: 1 / hits: 43272 / 9 Years ago, thu, january 7, 2016, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

brandt

Add To Favorites

Follow

Total Points: 43

Total Questions: 90

Total Answers: 111

Location: Aruba

Member since Fri, Jun 24, 2022

2 Years ago

answered 9 Years ago ryanulyssesb · Accepted Answer

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.