Import Both Default and Named Exports

#javascript #webdev #modules

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";

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";

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

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.