/ posts

Import All Named Exports into One Variable

We can import all of a JavaScript module’s contents into a single variable with * as.

import * as stringUtils from './string-utils.mjs'

Now stringUtils can reference any exports in string-utils.mjs using property access syntax.

import * as stringUtils from "./string-utils.mjs";
stringUtils.chant("we will");
stringUtils.hype("rock you");

Where is this a good practice?

Importing all named exports into a single variable is great feature for application code.

Consider these UI modules that have a similar export signatur.


export Item …;
export List …;
export ListItem …;
export Controller …;


export Item …;
export List …;
export ListItem …;
export Controller …;

Renaming all of these named exports is super irritating!

import {
List as EmailList,
ListItem as EmailListItem,
Controller as EmailController,
} from './email.js'
import {
List as ContactList,
ListItem as ContactListItem,
Controller as ContactController,
} from './contact.js'

By reducing moduling imports to a single reference, we eliminate the need to rename the colliding exports.

import * as Email from './email.js'
import * as Contact from './contact.js'
// Email.List, Contact.List, Email.Item, Contact.Item, etc.

And these namespaces guarantee that we never experience a collision between named exports.

My take

This is my preferred way to import named exports. It has eliminated pointless hours spent justifying local references between modules I don’t control.

Go pro

This is part of a course I’m build on modules at
When live, members get access to this and other courses on React.

Join for this course