How to properly do alias for import in JS?

Question

I have basic react class:

import React, { Component } from 'react';

class Children extends Component {
    render() {
        return (
            <h1>Children</h1>
        );
    }
}

export default Children;

Which is located at /scenes/Stash/Children/Children. I want to import it like StashChildren.

import {Children as StashChildren} from './scenes/Stash/Children/Children';

But I get:

45:88-101 "export 'Children' (imported as 'StashChildren') was not found in '_/scenes/Stash/Children/Children'

If I do just:

import {Children} from './scenes/Stash/Children/Children';

Everything works fine.

Answer 1

You can import the default export by either

import StashChildren from './scenes/Stash/Children/Children'

or

import {default as StashChildren} from './Children';

You just need to import the default under the name that you want.

Answer 2

Since you have exported children component as a default export you can import it by any name. So you simply need

import StashChildren from './scenes/Stash/Children/Children';

Check this When should I use brackets with imports for more details

Answer 3

Since you're exporting default you can call like import StashChildren from './scenes/Stash/Children/Children';

For alias, just remove the brackets:

import Children as StashChildren from './scenes/Stash/Children/Children';