CODEWITHSUNDEEP
javascriptecmascript-6babeljs
cdutson
cdutson

Reputation: 738

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

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?

Upvotes: 39

Views: 46291

Answers (4)

Abhishek Kumar
Abhishek Kumar

Reputation: 1015

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'

Upvotes: 0

Balaji.J.B
Balaji.J.B

Reputation: 636

you can use this method 

import * React from 'react'

Upvotes: 1

Mario Tacke
Mario Tacke

Reputation: 5488

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.

Upvotes: 65

Matt Nguyen
Matt Nguyen

Reputation: 71

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

Upvotes: 7

Related Questions