How to import two classes by the same name in javascript/es6?

Question

I have these two import statements in file:

import Data from 'component/Data.js'; import Data from 'actions/Data.js'; 

Both files contain a class named Data.

How can I specify which is which? How can I avoid name clash?

Answer 1

Presumably component/Data and actions/Data both have default exports rather than named exports? Like this:

export default class Data {} 

If that's the case, then the importer can call the variables whatever they like:

import Data1 from 'component/Data.js'; import Data2 from 'actions/Data.js'; 

If they are named exports:

export class Data {} 

Then you need to use braces along with as to specify the source and target names:

import { Data as Data1 } from 'component/Data.js'; import { Data as Data2 } from 'actions/Data.js';