Why Is `Export Default Const` invalid?

I see that the following is fine:

const Tab = connect( mapState, mapDispatch )( Tabs );
export default Tab;

However, this is incorrect:

export default const Tab = connect( mapState, mapDispatch )( Tabs );

Yet this is fine:

export default Tab = connect( mapState, mapDispatch )( Tabs );

Can this be explained please why const is invalid with export default? Is it an unnecessary addition & anything declared as export default is presumed a const or such?

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 fineexport 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>);

If the component name is explained in the file name MyComponent.js, just don't name the component, keeps code slim.

import React from 'react'

export default (props) =>
    <div id='static-page-template'>
        {props.children}
    </div>

Update: Since this labels it as unknown in stack tracing, it isn't recommended

Update 2: I have only been using the es5 version below since it keeps names on stack traces and react dev tools.

import React from 'react'

export default function MyComponent(props) {
    return (<div id='static-page-template'>
        {props.children}
    </div>)
}

Why Is `Export Default Const` invalid?

Related

Recent Posts