React. ES6. Babelify (w/ Browserify). Import alias fails

Question

So.

Here is the class Foo

class Foo
{
    constructor(bar) {
        this.bar = bar;
    }

    getBar() {
        return this.bar;
    }
}

export default Foo;

In Layout component I want to import it and alias it as Bar (according to the spec https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import).

import React from 'react';
import {Foo as Bar} from './../Entity/Foo.js';

class Layout extends React.Component {
    constructor(props) {
        super(props);

        this.bar = new Bar('alias test');
    }

    render() {
        console.debug(this.bar.getBar());

        return <p>Hello, world!</p>;
    }
} 

export default Layout;

After the gulp build I get this error.

Any ideas why alias doesn't work?

PS. Alias, doesn't work, but I still can create the object from class Foo. Also, such workaround will work as well

import {Foo as FakeBarEntity} from './../Entity/Foo.js'; const BarEntity = Foo;
import Foo from './../Service/Foo.js'; const BarService = Foo;

but that's nothing, but the spaghetti code.

PPS. Gulp task

gulp.task('build', function () {
    var b = browserify({
        entries: 'src/Index.jsx',
        extensions: ['.jsx'],
        debug: false
    });

    return b.transform(babelify, {presets: ["es2015", "react"]})
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('dist'));
});

React. ES6. Babelify (w/ Browserify). Import alias fails

0 Answers0