How can I alias a default import in JavaScript?

Question

Using ES6 modules, I know I can alias a named import:

import { foo as bar } from 'my-module';

And I know I can import a default import:

import defaultMember from 'my-module';

I'd like to alias a default import and I had thought the following would work:

import defaultMember as alias from 'my-module';

But that results in a parsing (syntax) error.

How can I (or can I?) alias a default import?

Bergi · Accepted Answer · 2016-09-01 23:30:27Z

1823

defaultMember already is an alias - it doesn't need to be the name of the exported function/thing. Just do

import alias from 'my-module';

Alternatively you can do

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

but that's rather esoteric.

answered Sep 1, 2016 at 23:30

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

19 Comments

ptim Over a year ago

The alias on its own is esoteric! Importing the named export and the default is handy when testing redux components: import WrappedComponent, { Component } from 'my-module';

phil294 Over a year ago

some very strict tslinting rules disagree and actually want you to preserve the name of the default input as the filename

Bergi Over a year ago

@Blauhirn Is that for old IDEs which cannot follow references and need to use global search-and-replace for their refactoring tools? Ridiculous.

phil294 Over a year ago

@Bergi no, it's the tslint rule "import-name", used e.g. by the airbnb tslint rule set and therefore rather widespread. These rules exist to encourage consistent, bugfree and readable code

nardecky Over a year ago

MDN docs should reflect these doc updates: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

|

Sergey Shandar · Accepted Answer · 2024-11-29 09:59:56Z

Origins, Solution and Answer:

Background:

A module can export functionality or objects from itself for the use in other modules

The Modules Used for:

Code reuse
Separation of functionalities
Modularity

What are Import Aliases?

Import aliases are where you take your standard import, but instead of using a pre-defined name by the exporting module, you use a name that is defined in the importing module.

Why is this important?

You may be importing multiple exported modules but the names of the exports (from different modules) are the same, this confuses JS. Aliases solve this.

Example of Multiple Alias Failed Compilation:

Failed to compile.
/somepath/index.js
SyntaxError: /somepath/index.js: Identifier 'Card' has already been declared (6:9)

Importing Aliases will allow you to import similarly named exports to your module.

import { Button } from '../components/button'
import { Card } from '../components/card'
import { Card } from 'react-native-elements'

When importing named exports (not default):

// my-module.js

function functionName(){
  console.log('Do magic!');
}

export { functionName };

Import in module:

import { functionName as AliasFunction} from "my-module.js"

What is default export?

Default export allows us to export a single value or to have a fallback value for your module.

For importing default exports:

// my-module.js
function functionName(){
  console.log('Do magic!');
}

export default functionName;

Solution

The defaultMember mentioned in the question is an alias already, you can change the name to whatever you will like.

Now import the exported function (`functionName()`);

import AliasFunction from "my-module.js"

Or like this (as mentioned by @Bergi):

import {default as AliasFunction} from 'my-module.js';

Collectives™ on Stack Overflow

How can I alias a default import in JavaScript?

2 Answers 2

19 Comments

Origins, Solution and Answer:

Background:

What are Import Aliases?

Why is this important?

What is default export?

Solution

Now import the exported function (`functionName()`);

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

19 Comments

Origins, Solution and Answer:

Background:

What are Import Aliases?

Why is this important?

What is default export?

Solution

Now import the exported function (functionName());

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Now import the exported function (`functionName()`);