Re-export default in ES 6 modules
JavascriptEcmascript 6BabeljsEs6 ModulesJavascript Problem Overview
In ES6, is it possible to shorten the following code. I have an App.js
file and an index.js
.
index.js
import App from './App';
export default App;
Something like this
index.js
export default App from './App.js'
Javascript Solutions
Solution 1 - Javascript
If you use proposal-export-default-from
Babel plugin (which is a part of stage-1
preset), you'll be able to re-export default using the following code:
export default from "./App.js"
For more information see the ECMAScript proposal.
Another way (without this plugin) is:
export { default as App } from "./App.js"
The above is a very common practice when separate files, each with its own export
, have all something in common, for example, utils
, so if, for example, one would want to import 3 utility functions, instead of having to write multiple imports:
import util_a from 'utils/util_a'
import util_b from 'utils/util_b'
import util_c from 'utils/util_c'
One could import any of the utilities in a single-line:
import { util_a, util_b , util_c } from 'utils'
By creating an index.js
file in the /utils
folder and import all the defaults of all the utilities there and re-export, so the index
file will serve as the "gateway" for all imports related to that folder.
Solution 2 - Javascript
This is a bit of repetition from the previous answers, but to clarify the difference in two options:
1. Default export
(This appears to be what OP wants)
// index.ts
export { default } from './App'
Then, in a different file:
import App from './index'
2. Named export
export { default as App } from './App'
Then, in another file:
import { App } from './index'
Bonus: named → default export
If ./App
uses a named export, but you want to re-export it as a default export, you can do that too:
export { App as default } from './App'
Then, in another file:
import App from './index'
These will work with react
as vsync's answer states.
Solution 3 - Javascript
import App from './App';
export default App;
⬇
@babel/preset-react
) can transform the below:
Babel 7 (with export { default as App } from './App.js';
Related discussions:
Solution 4 - Javascript
The only working solution is :
import App from './App';
export default App;
If you export your module like this
export { default as App } from './App.js';
Then it's not a default export anymore and you'll get an error if you try to import it as a default import.
Solution 5 - Javascript
import App from './App';
export default (App);
This work for me in default 'create-react-app' application