How to default export from a directory in JavaScript/TypeScript

Here, it's a named export (named Component1), not a default export:

export { default as Component1 } from './Component1'

which is why importing it via named imports works here:

import { Component1 } from './Component1'

If you want to make it the default export for the Component1/index.js, you need

export { default as default} from './Component1'

Personally, I like to be consistent when writing code - it's nice not to have to try to recall, for every single module, "Did this module export a default or something named?" In a given project, you may find it easier to use default exports everywhere, or named exports everywhere, but not mix them.