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.