538

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
  • 28,342
  • 21
  • 95
  • 123
sfletche
  • 36,606
  • 25
  • 86
  • 108

1 Answers1

1017

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
  • 513,640
  • 108
  • 821
  • 1,164
  • 22
    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
  • 5
    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
  • 1
    @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. – Rolando Murillo Jan 07 '20 at 20:15
  • @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. – Rolando Murillo 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. – Rolando Murillo 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
  • Concise and laconic - awesome. – VSO Feb 24 '20 at 18:33
  • 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