Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why can't I import a default export with "import ... as" with BabelJS

In version 5.6.4 of BabelJS, I seemingly cannot "import ... as." Here are examples of what I am trying to do:

In file 'test.js':

export default class Test {};

In file 'test2.js' (in the same directory):

import Test as Test2 from './test';

I have also tried to do:

import {Test as Test2} from './test';

Even though it says nothing about that here: http://babeljs.io/docs/learn-es2015/#modules

And only uses brackets in the non-default syntax here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

Has anyone done this successfully?

EDIT: It is absolutely because of the default keyword. So, in this case, the question becomes, does anyone have any links to documentation that states that I should not be able to alias a default import? ECMA or Babel.

like image 965
BTC Avatar asked Jun 27 '15 18:06

BTC


People also ask

How do you import as default in react?

Once a module has a default export, it can be imported in another module using the import keyword. In order, to import the default export from any file, we use the keyword import and then the address. A GIVEN_NAME is optional, and may or may not be required, based on the modules.

How do I fix import and export may only appear at the top level?

The error "import and export may only appear at the top level" occurs when we forget a closing brace when declaring a function or class, or mix up default and named exports and imports. To solve the error, make sure you haven't forgotten a closing brace in a function's definition.

Can I use ES6 imports?

Importing can be done in various ways:Node js doesn't support ES6 import directly. If we try to use import for importing modules directly in node js it will throw out the error.

What is an import alias?

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.


1 Answers

You can import the default export by either

import Test2 from './test';

or

import {default as Test2} from './test';

The default export doesn't have Test as a name that you would need to alias - you just need to import the default under the name that you want.

The best docs I've found so far is the article ECMAScript 6 modules: the final syntax in Axel Rauschmayers blog.

like image 150
Bergi Avatar answered Oct 17 '22 23:10

Bergi