Introduction

In JavaScript modules, a default import is already locally named by the importing file. That means “aliasing” a default import is usually just a matter of choosing the local name you want in the normal import X from "module" syntax.

Default Imports Are Already Renameable

Suppose a module exports a default value:

1// mathUtils.js
2export default function add(a, b) {
3  return a + b;
4}

When you import that module, you do not have to use the original function name. You can choose any local identifier:

import addNumbers from "./mathUtils.js";

console.log(addNumbers(2, 3));

That is the standard way to “alias” a default import. The name addNumbers exists only in the importing module. It does not change the exported symbol in mathUtils.js.

Why This Is Different from Named Imports

Named imports behave differently because the exported name matters:

1// helpers.js
2export function formatDate(value) {
3  return value.toUpperCase();
4}

To rename a named import, you do need as:

import { formatDate as formatInvoiceDate } from "./helpers.js";

That is where the confusion usually comes from. People remember named-import aliasing and assume default imports need the same syntax. They do not.

The Less Common Equivalent Form

JavaScript also allows this:

import { default as addNumbers } from "./mathUtils.js";

This works, but it is rarely the clearest choice. For default imports, most codebases prefer:

import addNumbers from "./mathUtils.js";

The shorter version communicates the same thing more directly.

A Practical Example

Default-import renaming is useful when the exported name is too generic for the current file.

1// service.js
2export default async function run() {
3  return "ok";
4}

In another file:

1import startServer from "./service.js";
2
3async function main() {
4  const result = await startServer();
5  console.log(result);
6}
7
8main();

Here the exported function might be called run, but startServer makes more sense in the local context.

Mixing Default and Named Imports

You can import a default export and named exports from the same module in one statement:

1// api.js
2export default function request(url) {
3  return Promise.resolve(url);
4}
5
6export function buildUrl(path) {
7  return "https://example.com/" + path;
8}

Then:

import fetchResource, { buildUrl } from "./api.js";

fetchResource(buildUrl("users")).then(console.log);

Again, fetchResource is just the local name you chose for the default export.

When Renaming Helps

Picking a different local name is useful when:

• two imports would otherwise collide
• the default export name is too vague
• the current file needs domain-specific clarity
• team naming conventions differ from the exported file

The important point is that the import name is a local binding, not a global rename.

Common Pitfalls

The most common mistake is trying to use named-import syntax for a default export:

import { add } from "./mathUtils.js";

That fails if add was exported as default rather than as a named export.

Another common confusion is thinking the exported function name inside the original file controls the import name. It does not. For default exports, the importer chooses the local name.

A third issue is overusing the longer default as form when the simpler default-import syntax is clearer.

Summary

• A default import can already be named however you want locally.
• The normal syntax is import MyName from "./module.js".
• 'as is mainly needed for named imports, not ordinary default imports.'
• 'import { default as X } works, but it is usually less readable.'
• Default-import renaming only changes the local binding in the current file.