857

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?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
sfletche
  • 47,248
  • 30
  • 103
  • 119

2 Answers2

1628

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.

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
  • 35
    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';` – ptim Jun 01 '17 at 03:14
  • 6
    some very strict tslinting rules disagree and actually want you to preserve the name of the default input as the filename – phil294 Nov 06 '18 at 19:48
  • 2
    @Blauhirn Is that for old IDEs which cannot follow references and need to use global search-and-replace for their refactoring tools? Ridiculous. – Bergi Nov 06 '18 at 22:48
  • 2
    @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 – phil294 Nov 07 '18 at 15:55
  • 4
    MDN docs should reflect these doc updates: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import – nardecky Jul 03 '19 at 17:24
  • 1
    Though it seems handy at first glance, importing the default as a different name but without explicitly stating `alias` should be discouraged. Just like the self increment operator `i++` in most languages, they only become natural when one is familiar enough with the language/framework. These design are counter-intuitive for beginners (think of Roman vs Arabic numerals), and tend to induce more effort in large projects (think of how frequently a programmer explicitly goes to the declaration in a codebase with few explicit type signature and rely on the type system to infer everything). – wlnirvana Dec 21 '19 at 02:36
  • @wlnirvana What do you mean by "*without explicitly stating `alias`*"? The alias is *always* explicitly declared. And notice that you cannot import the default under the same name, as `default` is not a valid identifier. – Bergi Dec 21 '19 at 11:56
  • 2
    @Bergi I meant something like `import foo from 'my-module';` instead of `import { TheExportedName as foo } from 'my-module';`. IMHO, the latter is better. – wlnirvana Dec 21 '19 at 13:05
  • @wlnirvana Sure, but there is no `TheExportedName` for default exports, it's always just the `default`, so the shorthand syntax is unambiguous. – Bergi Dec 22 '19 at 12:34
  • I found myself defining a constant to rename the default after the import: `import SuperLongDefaultName from 'le-default` `const ShortName = SuperLongDefaultName` I didn't know about `{default as …}` but I want the reader of my code to know at a glance what the original name was. Dunno why, it just would bother me if they didn't. – rnmp Jan 07 '20 at 20:15
  • 1
    @RolandoMurillo There is no "SuperLongDefaultName" of a default export, the only name it has is `default`. You don't need to use `as`, just `import ShortName from 'le-default'`. The module name should be enough to identify the imported value. – Bergi Jan 07 '20 at 20:24
  • @Bergi, I'm aware of it but I actually do want to respect the name of the default when I'm importing it if that makes sense. – rnmp Jan 07 '20 at 20:40
  • @RolandoMurillo Again, the default export has no name! Only the module has a name. – Bergi Jan 07 '20 at 20:42
  • @Bergi, I see what you mean. It's just that when I export a function or a constant, it always has a name. E.g. `export default myFunctionName …`. So, when I import I match that name: `import myFunctionName from …`. And like I said in my first comment -- I know I could just put whatever name I want but I prefer to use the same name as the exported module and rename it in the new file through a constant as needed. – rnmp Jan 07 '20 at 21:13
  • @RolandoMurillo Oh, you mean the local name. I don't consider that to be important, this is the **encapsulation** that modules are all about! The standard practice is to have that name match the file name / library name anyway, so it would be visible in module specifier of the import declaration. If you *do* consider it important, you probably shouldn't have used a default export in the first place. (Btw, it's possible to export an anonymous function declaration with `export default function(…){…}`). – Bergi Jan 07 '20 at 21:19
  • Does this only works when default export is in index.html or any file ? – vikramvi Mar 30 '21 at 12:12
  • @Bergi can you link to official documentation of this explanation, I didn't find any – vikramvi Mar 30 '21 at 12:14
  • @vikramvi There's is no "official" documentation (the only *official* document is the specification itself), but most things are documented at [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) – Bergi Mar 30 '21 at 13:21
40

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';
Stas Sorokin
  • 3,029
  • 26
  • 18