DEV Community

loading...
Cover image for Import Both Default and Named Exports

Import Both Default and Named Exports

Michael Chan
Clumsy Jesus follower. Mediocre dev/designer. Pretty OK hubs and dad.
Originally published at chan.dev on ・1 min read

We can mix and match import styles to keep code tidy and direct.

The code below imports both the default export (as cheesburger) as well as all named exports.

import { default as cheeseburger, bun, cheese, patty,} from "./cheeseburger.mjs";
Enter fullscreen mode Exit fullscreen mode

We can tidy it up a smidge by splitting the default export and named export import statements — using a comma.

- import {
- default as cheeseburger,
- bun,
- cheese,
- patty,
- } from "./cheeseburger.mjs";
+ import cheeseburger, { bun, cheese, patty } from "./cheeseburger.mjs";
Enter fullscreen mode Exit fullscreen mode

This eliminates the need to rename the default on import with as.

What mixed imports are not #

The import position of default and named exports cannot be swapped. When mixing the two, it's always default first then named exports.

When I first saw this syntax, I assumed that every comma was like a repeaet — a new opportunity to assign local variables. That's not how it is. One comma, after the default, and before the named.

Go pro #

This is part of a course I'm building on modules at lunch.dev.

When live, members get access to this and other courses on React.

Join lunch.dev for videos

Discussion (0)