In JS ES6, why is it that if I export default, then I cannot export it individually?

I found that I can do:

export function Foo() {
  return <div>hello</div>;
}

export default Foo;

but I cannot move that default to the top:

export default function Foo() {
  return <div>hello</div>;
}

export Foo;

Why is that? They just seem to serve the same purpose: export Foo as default and individually, but the first form is ok while the second form is not.

Answer

I can’t quite tell if this is a language quirk, because I never see a bare export SymbolName, but changing the last line to this is valid:

export { Foo };

Which is shorthand for:

export { Foo as Foo };

I suspect it simply has to do with the fact that the syntax generally is:

export [function|const|class|let] Foo ...etc...

MDN has a great list of all the different ways you can export.

I don’t have an answer as to why export Foo doesn’t work