Why Is `Export Default Const` invalid?
const
is like let
, it is a LexicalDeclaration (VariableStatement, Declaration) used to define an identifier in your block.
You are trying to mix this with the default
keyword, which expects a HoistableDeclaration, ClassDeclaration or AssignmentExpression to follow it.
Therefore it is a SyntaxError.
If you want to const
something you need to provide the identifier and not use default
.
export
by itself accepts a VariableStatement or Declaration to its right.
The following is fine
export default Tab;
Tab
becomes an AssignmentExpression as it's given the name default ?
export default Tab = connect( mapState, mapDispatch )( Tabs );
is fine
Here Tab = connect( mapState, mapDispatch )( Tabs );
is an AssignmentExpression.
Update: A different way to imagine the problem
If you're trying to conceptually understand this and the spec-reasoning above is not helping, think of it as "if default
was a legal identifier and not a reserved token, what would be a different way to write export default Foo;
and export default const Foo = 1;
?"
In this situation, the expanded way to write it would be
// pseudocode, this thought experiment is not valid JS
export default Foo;
// would be like
export const default = Foo;
export default const Foo = 1;
// would be like
export const default const Foo = 1;
// so would the following line make sense?
const bar const Foo = 1;
There is a valid argument the expansion should be something like
// pseudocode, this thought experiment is not valid JS
export default const Foo = 1;
// would be like
const Foo = 1;
export const default = Foo;
However, this then would become ambiguous per Sergey's comment, so it makes more sense to write this pattern explicitly instead.
You can also do something like this if you want to export default a const/let, instead of
const MyComponent = ({ attr1, attr2 }) => (<p>Now Export On other Line</p>);
export default MyComponent
You can do something like this, which I do not like personally.
let MyComponent;
export default MyComponent = ({ }) => (<p>Now Export On SameLine</p>);