ES6 exporting/importing in index file

javascript ecmascript-6 webpack babeljs
MoeSattler picture MoeSattler · Dec 3, 2015 · Viewed 119.5k times · Source

I am currently using ES6 in an React app via webpack/babel. I am using index files to gather all components of a module and export them. Unfortunately, that looks like this:

import Comp1_ from './Comp1.jsx';
import Comp2_ from './Comp2.jsx';
import Comp3_ from './Comp3.jsx';

export const Comp1 = Comp1_;
export const Comp2 = Comp2_;
export const Comp3 = Comp3_;

So I can nicely import it from other places like this:

import { Comp1, Comp2, Comp3 } from './components';

Obviously that isn't a very nice solution, so I was wondering, if there was any other way. I don't seem to able to export the imported component directly.

Answer

Bergi picture Bergi · Dec 3, 2015

You can easily re-export the default import:

export {default as Comp1} from './Comp1.jsx';
export {default as Comp2} from './Comp2.jsx';
export {default as Comp3} from './Comp3.jsx';

There also is a proposal for ES7 ES8 that will let you write export Comp1 from '…';.

Related questions

Getting Unexpected Token Export

I am trying to run some ES6 code in my project but I am getting an unexpected token export error. export class MyClass { constructor() { console.log("es6"); } }

Read More
Unexpected "Uncaught TypeError: XXX is not a constructor" errors with Babel and ES6

I am giving a try to Webpack, and am giving a try to the instructions in this tutorial, give or take a few custom things. This is simple code, really, but I'm quite puzzled about this error, and feel this …

Read More
Why does Object.assign() require a polyfill when babel-loader is being used?

I'm attempting to use Object.assign() in an ES6 web app compiled by Babel with webpack, but I'm getting an error: Uncaught TypeError: Object.assign is not a function I'm already using babel-loader to transpile ES6 to ES5, so all …

Read More