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 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.
"AFAIK the export in itself should not add anything to your current scope" This is not so accurate, because export const a = 1 adds a to your current context. And even with export default in case of classes, because export default class MyClass {} adds MyClass to your current context as well. –
Monteux let a; export default a; and then update the variable a when it already has been imported into another module, why does the export default variable not update? –
Helio const foo = function bar() {} and also const Foo = class Bar {}, but not const foo = const bar = 1. Same for export default, it's just like const foo =. –
Morette export default const ..., a construct which seems to make perfect sense despite being illegal. I highly doubt that @Shimberg was asking about the parser. –
Barramunda export default like sugar for export const default =, so writing export default const foo = bar; would be equivalent to export const default = const foo = bar;, which wouldn't make sense as x y is a syntax error and const is a token which can't be an identifier so also would be an error (you cant const const = 1;) –
Parhe 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>);
export default function MyComponent({ attr1, attr2 }) should be preferred over the let MyComponent solution –
Rapier 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>)
}
Unknown everywhere where is unnamed default export –
Substrate export default function MyComponent(props) { –
Barramunda react. It is a question about how to perform a default-export with a const value! IMO this is clearly the correct answer. –
Jadeite The answer shared by Paul is the best one. To expand more,
There can be only one default export per file. Whereas there can be more than one const exports. The default variable can be imported with any name, whereas const variable can be imported with it's particular name.
var message2 = 'I am exported';
export default message2;
export const message = 'I am also exported'
At the imports side we need to import it like this:
import { message } from './test';
or
import message from './test';
With the first import, the const variable is imported whereas, with the second one, the default one will be imported.
message2 and so it should be import message2 from './test';. Just to clarify further - only named exports can use curly braces ({}). Since there can only be one default export per module file, importing default vars doesn't require them as in importing message2. –
Semiconductor With export default, you don't export the name of, in this case, the variable.
wrong:
export default const Tab = connect( mapState, mapDispatch )( Tabs );
right:
export default connect( mapState, mapDispatch )( Tabs );
You can import it on any name you like
Paul's answer is the one you're looking for. However, as a practical matter, I think you may be interested in the pattern I've been using in my own React+Redux apps.
Here's a stripped-down example from one of my routes, showing how you can define your component and export it as default with a single statement:
import React from 'react';
import { connect } from 'react-redux';
@connect((state, props) => ({
appVersion: state.appVersion
// other scene props, calculated from app state & route props
}))
export default class SceneName extends React.Component { /* ... */ }
(Note: I use the term "Scene" for the top-level component of any route).
I hope this is helpful. I think it's much cleaner-looking than the conventional connect( mapState, mapDispatch )( BareComponent )
@connect is the only decorator I use, I only use it with components that are attached to a redux store, almost every one of those is a "route," and almost every route should have state (and therefore cannot be a pure function). –
Claresta default is basically const someVariableName
You don't need a named identifier because it's the default export for the file and you can name it whatever you want when you import it, so default is just condensing the variable assignment into a single keyword.
default is basically const foo", not exactly, at least export default a = 1;a=2; gives assignment to undeclared variable a and export const a = 1;a=2; gives invalid assignment to const 'a'. Moreover, export default a = 1; allows BOTH unnamed (default) import and named import while export const a = 1; only has named import. Totally inaccurate answer. –
Sapor JavaScript does not support export default along with const.
export default can be used along with expressions, functions and classes.
export default const a = 10, b = 20;
It is because we cannot identify which is the default out of a and b at the time of import.
const a = 10, b = 20;
export default a;
Don't use default with const:
export const a = 10, b = 20;
Note: Although only 1 export default is allowed in a JavaScript module, multiple exports are allowed.
© 2022 - 2025 — McMap. All rights reserved.
export default Tab = connect( mapState, mapDispatch )( Tabs );should beexport default connect( mapState, mapDispatch )( Tabs );. You're exporting the result of the function call, not the variable Tab. – Thunderclapexport default Tab =is a syntax error,Tabis undefined. The only way this would be valid syntax is if you had assignedTabto something via let or var before... e.glet Tab; export default Tab = ...which is not good practice. – Dareeceexport default connect( mapState, mapDispatch )( Tabs );- keep in mind that the var name is irrelevant whenimporting a default value; for this reason it makes sense thatTab, the var name, disappears – Jadeite