DEV Community

Cover image for Import Default From Named Export
chantastic
chantastic

Posted on • Originally published at chan.dev on

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";
Enter fullscreen mode Exit fullscreen mode

The lines below yield identical results.

- import Highlander from "./highlander.js";
+ import { default as Highlander } from "./highlander.js";
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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 />
Enter fullscreen mode Exit fullscreen mode

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.

Join lunch.dev for videos

Top comments (0)