CODEWITHSUNDEEP
javascriptreactjs
IvoTivo
IvoTivo

Reputation: 13

Simplify import statements

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?

Upvotes: 0

Views: 262

Answers (2)

Harshit Agarwal
Harshit Agarwal

Reputation: 2420

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();

Upvotes: 3

Tien Duong
Tien Duong

Reputation: 2595

You need to write export as below

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

Upvotes: 2

Related Questions