Difference between export default and export { default }
What is the difference
There is a huge difference between the two, one is in standard ES6 and the other is yet a proposal.
// Standard ES6
export { default } from './Button';
This is standard ES6: it is exporting the Default of Button from the current module (without altering the local scope of the current module)// A Proposal
export default from './Button';
This is a proposal, and that explains why it does not work at vscodeHere is the proposal https://github.com/tc39/proposal-export-default-from (still stage 1)
Basically according to the proposal both should work exactly the same, the proposal is just another more elegant way of writing it - so that it matches how we export default in Standarad ES6.
Look here if you want to see why exactly the author of the proposal made it
https://github.com/tc39/proposal-export-default-from#common-concerns
Why they both work
JavaScript as it is often used today is no longer a mere interpreted language. It is more like a transpiled langauge, where what we write ( though in JavaScript or something similar) is still not the same that we send for the JS engine.
Now it works for you ( In your Code ) because part of your build system is taking code written with this proposal and transpiling it to standarad ES6. If we were to speak about Babel the most popular JS transpiler, this syntax is enabled with the following plugin https://babeljs.io/docs/en/next/babel-plugin-proposal-export-default-from.html.
Should I keep using the proposal
Preferably no, this is a proposal in state 1, even if Babel - or any other transpiler - makes it work, there is a chance that it never makes it to Standarad JavaScript. And if that happens there will come a time in the future will you will have to re-write that code.
Is there a use case for exporting the same const as a named and default export?
Not really. The only thing I can think of is backwards-compatibility, possibly related to how they are transpiling their code, if the module is a library used elsewhere.Is there any use case for this practice?
A default export is not necessary for that. You can easily use a namespace import with named exports only:The only reason I can think of is that this approach can give more flexibility when it comes to importing constants.
import * as INITIALIZATION_CONSTS from './whatever.consts';
let id = INITIALIZATION_CONSTS.DEFAULT_ID, code = INITIALIZATION_CONSTS.CURRENT_CODE
`export const` vs. `export default` in ES6
It's a named export vs a default export. export const
is a named export that exports a const declaration or declarations.
To emphasize: what matters here is the export
keyword as const
is used to declare a const declaration or declarations. export
may also be applied to other declarations such as class or function declarations.
Default Export (export default
)
You can have one default export per file. When you import you have to specify a name and import like so:
import MyDefaultExport from "./MyFileWithADefaultExport";
You can give this any name you like.Named Export (export
)
With named exports, you can have multiple named exports per file. Then import the specific exports you want surrounded in braces:
// ex. importing multiple exports:
import { MyClass, MyOtherClass } from "./MyClass";
// ex. giving a named import a different name by using "as":
import { MyClass2 as MyClass2Alias } from "./MyClass2";
// use MyClass, MyOtherClass, and MyClass2Alias here
Or it's possible to use a default along with named imports in the same statement:import MyDefaultExport, { MyClass, MyOtherClass} from "./MyClass";
Namespace ImportIt's also possible to import everything from the file on an object:
import * as MyClasses from "./MyClass";
// use MyClasses.MyClass, MyClasses.MyOtherClass and MyClasses.default here
Notes- The syntax favours default exports as slightly more concise because their use case is more common (See the discussion here).
A default export is actually a named export with the name
default
so you are able to import it with a named import:import { default as MyDefaultExport } from "./MyFileWithADefaultExport";
Export and export default a variable
export exports
is not valid syntax, it looks similar to something that TypeScript did support but that is deprecated in favour of modern syntax. Do not use it.
export default exports;
and import everything from 'my_module';
would work together, but it's not recommended to default-export objects since it doesn't work with named imports.
Instead, use named exports:
export {
Something,
SomethingElse
}
(or put the export
right on the declarations of Something
and SomethingElse
), then you can choose to do eitherimport {Something} from 'my_module';
orimport * as everything from 'my_module';
What is export default in JavaScript?
It's part of the ES6 module system, described here. There is a helpful example in that documentation, also:
If a module defines a default export:then you can import that default export by omitting the curly braces:// foo.js
export default function() { console.log("hello!") }import foo from "foo";
foo(); // hello!
Update: As of June 2015, the module system is defined in §15.2 and the
export
syntax in particular is defined in §15.2.3 of the ECMAScript 2015 specification. module.exports vs. export default in Node.js and ES6
The issue is with
- how ES6 modules are emulated in CommonJS
- how you import the module
ES6 to CommonJS
At the time of writing this, no environment supports ES6 modules natively. When using them in Node.js you need to use something like Babel to convert the modules to CommonJS. But how exactly does that happen?Many people consider module.exports = ...
to be equivalent to export default ...
and exports.foo ...
to be equivalent to export const foo = ...
. That's not quite true though, or at least not how Babel does it.
ES6 default
exports are actually also named exports, except that default
is a "reserved" name and there is special syntax support for it. Lets have a look how Babel compiles named and default exports:
// input
export const foo = 42;
export default 21;
// output
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var foo = exports.foo = 42;
exports.default = 21;
Here we can see that the default export becomes a property on the exports
object, just like foo
.Import the module
We can import the module in two ways: Either using CommonJS or using ES6 import
syntax.
Your issue: I believe you are doing something like:
var bar = require('./input');
new bar();
expecting that bar
is assigned the value of the default export. But as we can see in the example above, the default export is assigned to the default
property!So in order to access the default export we actually have to do
var bar = require('./input').default;
If we use ES6 module syntax, namelyimport bar from './input';
console.log(bar);
Babel will transform it to'use strict';
var _input = require('./input');
var _input2 = _interopRequireDefault(_input);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
console.log(_input2.default);
You can see that every access to bar
is converted to access .default
.
Related Topics
JavaScript Mapping Touch Events to Mouse Events
Objects VS Arrays in JavaScript for Key/Value Pairs
Twig Variable in External Js File
JavaScript Displaying a Float to 2 Decimal Places
Serialize Object to Query String in JavaScript/Jquery
What's "This" in JavaScript Onclick
Efficient Way to Insert a Number into a Sorted Array of Numbers
Write Elements into a Child Iframe Using JavaScript or Jquery
How to Detect If JavaScript Files Are Loaded
Is Localstorage.Getitem('Item') Better Than Localstorage.Item or Localstorage['Item']
Scroll Smoothly to Specific Element on Page
How to Get the Focused Element with Jquery
Ng-Model Does Not Update Controller Value
How to Copy a Dom Node with Event Listeners
Pass Parameter with Python Flask in External JavaScript
How to Disable the Back Button in the Browser Using JavaScript