153

I'd like to the following but with a single line, if possible:

  • import Module from './Module/Module;'
  • export Module;

I tried the following but it doesn't seem to work:

  • export Module from './Module/Module;
Nikola Lukic
  • 4,001
  • 6
  • 44
  • 75
Detuned
  • 3,652
  • 4
  • 27
  • 54
  • See also [Is there any one-line analog in ES6 for ES5 `module.exports = require('./inner.js')`?](http://stackoverflow.com/q/32229947/1048572) and [Is `export { foo as default }` valid ES6?](http://stackoverflow.com/q/33155785/1048572) – Bergi Jun 17 '16 at 12:32

6 Answers6

280
export {default as Module} from './Module/Module';

is the standard ES6 way, as long as you don't need Module to also be available inside the module doing the exporting.

export Module from './Module/Module';

is a proposed ESnext way to do it, but that only works if you've enabled it in Babel for now.

steadweb
  • 15,364
  • 3
  • 33
  • 47
loganfsmyth
  • 156,129
  • 30
  • 331
  • 251
  • It worked great, however, it seems like Webpack doesn't like this, giving a notification that the `component` is now read-only and unable to be hot reloaded. Very strange! – Detuned Feb 27 '16 at 05:31
  • perfect, this should be the accepted answer. (if webpack hot reload doesn't like that's a problem in that tool or it's HMR plugin.) – Benja Oct 25 '16 at 22:24
  • 22
    If anyone is wondering which babel plugin it is, it is `export-extensions` here - http://babeljs.io/docs/plugins/transform-export-extensions/ – Noitidart Apr 30 '17 at 06:18
  • 1
    @loganfsmyth is there a way to export the above as default? – lycuid Dec 15 '18 at 12:29
  • 6
    @abhishek-kdm `export { default as default } from` or `export { default } from` – loganfsmyth Dec 15 '18 at 21:29
  • Problem seems to be if Module is commonjs module with only default export and you do not want to use it inside current module with this statement, but still want to exported.. I have utilities module which is reexporting some methods from lodash, but they are commonjs modules, only option seems to be using lodash-es npm package :/ – Luckylooke Feb 03 '21 at 15:47
  • Also I have just found that using `export {default as Module} from './Module/Module';` Module is not defined in current file ‍♂️ – Luckylooke Feb 03 '21 at 16:20
  • What's the best way to also use that export in the same file? Edit: just have duplicate lines with import & export I guess. – kano Oct 13 '22 at 14:08
  • @kano Yes you'd want to separate them. – loganfsmyth Oct 16 '22 at 00:41
43

I don't know why but just this works for me :

components/index.js:

import Component from './Component';
import Component2 from './Component2';
import Component3 from './Component3';
import Component4 from './Component4';

export {Component, Component2, Component3, Component4};

I import the exports like this : 

import {Component, Component2, Component3, Component4} from '../components';
Community
  • 1
  • 1
Kamuran Sönecek
  • 3,293
  • 2
  • 30
  • 57
38

Please note you can also re-export everything from a module:

export * from './Module/Module';
laszlo-horvath
  • 1,852
  • 2
  • 19
  • 20
  • 5
    This wildcard syntax will only work on files with named exports. If the file only has a single default export, you'll get the error "No named exports found in module". – dmbaughman Jun 05 '20 at 16:25
20

For React Native components this syntax works for me:

export {default} from 'react-native-swiper';
Ivan Chernykh
  • 41,617
  • 13
  • 134
  • 146
  • This works for me for React (not Native) when I wish to re-export an imported default. I use this in index.js files that don't apply any HOCs to my 'pure' components – Shiraz May 07 '19 at 12:46
0
// Service
// ...
export const paymentService = new PaymentService()

// Entry services/index.js file
export * from './paymentService'

// use it like
import { paymentService } from './services/'
elverde
  • 193
  • 2
  • 7
-3

So, I've found this to work quite well for the immediate export functionality of having an index.js at the root of the components directory for easy referencing:

import Component from './Component/Component'
import ComponentTwo from './ComponentTwo/ComponentTwo'

module.exports = {
  Component,
  ComponentTwo
};

You need to use module.exports.

Detuned
  • 3,652
  • 4
  • 27
  • 54
  • 3
    Keep in mind that since this is partially CommonJS modules, this will only work specifically in Babel and will fail if you attempt to use it in a real ES6 module once support for them lands in more environments, and will likely stop working in future versions of Babel. – loganfsmyth Dec 12 '16 at 17:42
  • Correct. Intermingling commonJS & es6 import / export in Babel 6 breaks. Babel5 allowed / reinforced this incorrect behavior. In your example, `Component` will no longer be a reference to your exported component, but instead will be an object, with your instance reference living on `Component.default` – Scott Silvi Feb 07 '17 at 21:04
  • Anybody know how to do this without using `module.exports` ? I like this method of packaging a bunch of components into an `index.js` but can't figure out the syntax. `import x from 'x'; import y from 'y'; export default {x, y};` then `import {x} from xy;` doesn't work (and I can't figure out why not) – Alex McMillan Mar 22 '17 at 10:28
  • 2
    Alex, did you try `export {x, y}` instead? – jtompl Mar 28 '17 at 20:35
  • This answer is not es6. It's a non-EcamScript platform. -1 – rektide Aug 06 '20 at 03:13