Import Both Default and Named Exports

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

Join lunch.dev for this course