ES6, how can you export an imported module in a single line?

Question

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;

Becalm

See also Is there any one-line analog in ES6 for ES5 module.exports = require('./inner.js')? and Is export { foo as default } valid ES6? – Margarine

Answer 1

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.

Paschasia

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! – Becalm

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.) – Cheryl

If anyone is wondering which babel plugin it is, it is export-extensions here - babeljs.io/docs/plugins/transform-export-extensions – Francklin

@Paschasia is there a way to export the above as default? – Gastrostomy

@abhishek-kdm export { default as default } from or export { default } from – Paschasia

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 :/ – Bennington

Also I have just found that using export {default as Module} from './Module/Module'; Module is not defined in current file 🤷‍♂️ – Bennington

What's the best way to also use that export in the same file? Edit: just have duplicate lines with import & export I guess. – Gimcrack

@Gimcrack Yes you'd want to separate them. – Paschasia

Answer 2

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

Reflectance

⚠ this method kills three shaking – Bennington

How can this be adjusted to not kill tree shaking? – Tenebrous

Answer 3

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

export * from './Module/Module';

Monika

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". – Loyceloyd

Answer 4

For React Native components this syntax works for me:

export {default} from 'react-native-swiper';

Luculent

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 – Dishonest

Answer 5

// Service
// ...
export const paymentService = new PaymentService()

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

// use it like
import { paymentService } from './services/'

Mapes

Answer 6

  export {Module as default} from '/path'

that worked for me with Module as named exported.

export {default} from '/path'

if Module is exported as default from the file where defined

Lather

Answer 7

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.

Becalm

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. – Paschasia

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 – Greig

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) – Depressor

Alex, did you try export {x, y} instead? – Podvin

This answer is not es6. It's a non-EcamScript platform. -1 – Phyfe