Simplify import statements

Question

According to question Is it possible to import... I've tried to simplify my import statements but debugger stops at Attempted import error: 'TaskDropdown' is not exported from './oddments'.

oddements/index.js

export * from './TaskBadge';
export * from './TaskDeadline';
export * from './TaskDropdown';
export * from './TaskInfoRow';
export * from './TaskStatusBadge';

TaskDropdown.js

export default TaskDropdown;

somehwere else

import { TaskStatusBadge, TaskInfoRow, TaskDropdown } from './oddments';

Possible walkaround is by using import/export at the same file.

import TaskBadge from './TaskBadge';
export {TaskBadge}

What could be wrong? Is the answer from mentioned thread correct?

score 3 · Answer 1 · answered Jul 25 '19 at 11:02

Multiple export from the same file can be done in two following ways:

1st Way:
 export function1 () {}
 export function2 () {}
 export function3 () {}

2nd Way:
export { function1, function2, function 3} from abc.js

Then you use import in the following two ways:

1st Way:
import { function 1, function2, function3 } from './abc'

//Then use it like:
function1();

2nd Way:
import * as abc from './abc'

//Then use it like:
abc.function1();

score 2 · Accepted Answer · answered Jul 25 '19 at 10:56

2

You need to write export as below

export { default as TaskDropdown } from './TaskDropdown';

answered Jul 25 '19 at 10:56

Tien Duong

2,517
1
10
27

Good point, ty. Use `export {TaskDropdown}` and `export * from './TaskDropdown';` works too. – IvoTivo Jul 25 '19 at 11:41

Simplify import statements

2 Answers2