Import Default From Named Export
Importing default can be nuanced. There are just so many ways to do it.
I like to think of default as a named export with a fixed (non-customizeable) name.
Check out how we can import default like a named export.
import {default as Highlander} from './highlander.js'The lines below yield identical results.
import Highlander from "./highlander.js";import { default as Highlander } from "./highlander.js";Unlike named exports, you can’t import default and use it directly. It must be remaned at import. This is why the more ergonomic option of import MyAlias from "…"; exists.
Use default thru a module alias
We’ve discussed module aliases in past posts. And they have some overlap with the default export.
Check out this totally valid use of Module aliases and default.
import * as Highlander from './highlander.js'
Highlander.default()Technically, you’re not using the default keyward because we’re accessing the reference as a property.
Of course, this looks a little strange when used in frameworks like React.
<Highlander.default>…<Highlander.default />My take
I don’t use default as or ModuleAlias.default() import styles in practice. I just find it helpful to remember how default is exported from modules.
In future posts, we’ll cover two, more ergonomic alternatives capturing both default and named exports.
Go pro
This is part of a course I’m build on modules at lunch.dev.
When live, members get access to this and other courses on React.