How can I alias a default import in JavaScript?

javascript

import-aliasing

javascript-best-practices

code-readability

byAnton Shumikhin·Jan 1, 2025

To rename a default import, use the as keyword in your JavaScript import statement:

import myDefaultExport from 'my-module';

Transforms into:

import { default as Alias } from 'my-module';

Now, Alias stands for the default export from my-module.

Default import aliasing: the basics

When you utilize default import, you're essentially accessing the primary (or main) export of a module. The convenient part about default exports is their independence from specific names, allowing you to set your own identifier.

Consider a module exporting a default function:

// mathUtils.js
export default function add(x, y) { // Just your friendly neighborhood addition function
  return x + y; // x doesn't mind sharing the spotlight with y
}

You could import and alias add with a name that suits you:

// myFile.js
import sum from './mathUtils.js'; // sum... because it "adds" elegance

In this scenario, sum acts as an alias for add, boosting the readability of your code.

The magic of aliasing

Using aliases brings a treasure trove of benefits:

Code clarity: Your imports make sense at a simple glance, no decoding required.
Conflict resolution: Squash that potential for collision between local definitions or imports from other modules.
Adaptability: You can plug in modules without worrying over conflicting module naming schemas.

Common pitfalls and how to dodge them

Despite the apparent simplicity, here are a few traps to bear in mind:

Over-aliasing: Too many aliases spoil the broth, leading to confusion (an overexcited alias party perhaps?). Use with thought.
Team consistency: Align with your dev team on how and when to employ aliases.
Documentation: Keep all related docs updated to reflect your swanky new aliases.

Instances to use direct aliasing

When should you resort to import {default as Alias}?

You're handling multiple imports from different modules and foresee naming clashes.
You're bundling default export with named exports and strive for syntax continuity.
The module's default export name is vague or non-compliant with your naming conventions.

The art of refactoring

In the world of code refactoring, aliases could be indispensable::

Modify only the import statement while fiddling with a module's export.
Effortlessly switch between different module versions or variations.
Preserve backward compatibility by aliasing a just-exported function with its previous name.