Why Is Export Default Const invalid

Question

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  amp  anything declared as export default is presumed a const or such

User · Answer

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

User · Answer

To me this is just one of many idiosyncracies  emphasis on the idio t    of typescript that causes people to pull out their hair and curse the developers  Maybe they could work on coming up with more understandable error messages

User · Answer

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     AFAIK the export in itself should not add anything to your current scope        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

User · Answer

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    gt         appVersion  state appVersion        other scene props  calculated from app state  amp  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

User · Answer

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

User · Answer

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

User · Answer

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    gt       lt div id  static-page-template  gt           props children       lt  div gt    Update  Since this labels it as unknown in stack tracing  it isn t recommended

[javascript] Why Is `Export Default Const` invalid?

Examples related to javascript

Examples related to scope

Examples related to export

Examples related to constants

Examples related to default