chantasticImporting 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 creating on modules at lunch.dev.
When live, members get access to this and other courses on React.
