export components from index file

Question

i have shared components folder when i created some components and i want to export all of them to index.js file and then export all of them from that file. thats how it looks from one of the components file:

export default ToggleSwitch;

now in the index file i try to export them again, it looks like this:

export { default as ToggleSwitch } from './ToggleSwitch';
export { default as Input } from './TextField';
export { default as Button } from './Button';

when i try to import one of the components if i import like this:

import Button from '../../shared/components';

i get this error saying that '../../shared/components' does not contain a default export
and when i try to import it like this,

import { Button } from '../../shared/components';

i get error saying Button is not exported from '../../shared/components'.

what am i doing wrong here?

Please make producible example codesandbox.io/s/vanilla-react-template-irhcq — Dennis Vash
The re-exporting module containing export { default as Button } from './Button';, exports it as Button not as default. Therefore, you cannot import it as if it were the default from that module. import { Button } from '/re-exporting-module'; is correct — Aluan Haddad
He still says named export not working... I think it's just typo somewhere... But we need a producible example — Dennis Vash
@DennisVash fair enough. I just wanted to clarify that point. — Aluan Haddad

Enes Kirimi Enes Kirimi · Accepted Answer · 2020-05-11T13:43:07

Have you tried importing as import { Button } from 'shared/components';?

For reference, the current codebase I work with has a similar structure for stores (flux stores) and this pattern works.

An example from the codebase: import { ClickStore } from 'stores';.

export components from index file

1 Answers