ES6 Modules not importing as expected in React

Question

I've been having an issue with importing a react class into a container

My file organization is as follows:

├── components
│   ├── Header
│   │   ├── Header.js
│   │   └── index.js
│   └── index.js
├── containers
│   └── HeaderContainer.js
└── index.js

where components/Header/Header.js exports with

export default class Header extends Component {}

components/Header/index.js is

import Header from './Header';
import './Header.scss';

export default Header;

and components/index.js is

export Header from './Header';

and containers/HeaderContainer.js is trying to import with

import { Header } from '../components';

However, this doesn't work, Header is undefined.

If I use import * as components from '../components';, Header is listed, but using components.Header is again undefined.

However, it works perfectly if I instead do

import Header from '../components/Header';

Can anyone explain why the first two methods don't seem to be working? I've done it before this way, and I cannot figure out what I may have changed (admittedly, part of the reason I'm asking is just to type it out a new way and seeing if it helps)

Additionally, I've been able to use

import { Header } from './components';

from an index file in the main directory, which worked perfectly. The issue seems to somehow be with import { Header } from '../components' only

wrt babel/webpack, I'm using `presets: ['es2015', 'stage-0', 'react']` if that helps at all — Chris Barry, Aug 23 '17 at 13:38
try in components/index.js : import "./Header" instead of export — Getter Jetter, Aug 23 '17 at 13:42
Possible duplicate of [When should I use curly braces for ES6 import?](https://stackoverflow.com/questions/36795819/when-should-i-use-curly-braces-for-es6-import) — Mayank Shukla, Aug 23 '17 at 13:43
@OlivierKrull I tried doing that already, and the exporting all of the other components in a single object, but nothing changed — Chris Barry, Aug 23 '17 at 13:49

score 1 · Answer 1 · answered Aug 23 '17 at 13:42

1

There are two types of export: named and default. Named export should be consumed by using construct like:

import { Header } from '../components';

Default on the other hand should be consumed like:

import Header from '../components';

You can read more here;

answered Aug 23 '17 at 13:42

Amid

21,508
5
57
54

I'm not sure this applies, right? I'm using default imports in the `components/index.js`, and then exporting to named imports – Chris Barry Aug 23 '17 at 13:51
Check the syntax of `export` in the link I have provided. You cant write `export Header from './Header';`. My suggestion would be to remove default exports and stick with named ones. It will make your life easier. – Amid Aug 23 '17 at 13:57
My issue here is that it does seem to work in another file, it only doesn't work inside the containers directory – Chris Barry Aug 23 '17 at 14:11

score 1 · Accepted Answer · answered Aug 23 '17 at 16:15

You probably have a cyclical dependency issue. Consider:

components/index.js starts loading.
It sees it needs containers/HeaderContainer.js, so it suspends.
containers/HeaderContainer.js starts loading.
It sees it needs import { Header } from '../components';, so it suspends.
components/index.js is already loading from step 1, so this step is a no-op.
containers/HeaderContainer.js starts running again.
Since components/index.js is still loading, the imported Header is pointing to a variable that hasn't been initialized yet, like if you did

console.log(Header); let Header = ...

Babel's behavior in this situation is to make Header undefined. In a real native ES6 module environment, it would throw an exception because Header wasn't initialized yet.

There are two main options to fix this. Either one should help:

Import ../components/Header directly to avoid the already-loading components/index.js.

Reorder your imports so Header is already initialized in components. e.g.

export { HeaderContainer } from './containers/HeaderContainer';
export { Header } from './Header';

to

export { Header } from './Header';
export { HeaderContainer } from './containers/HeaderContainer';

Aha! The cyclical dependency thing is definitely it, I've been importing something directly from components which in turn loads containers, which then load components again. Thanks so much for your help, I don't think I'd ever have figured that out. Marked as correct, I'd upvote but... — Chris Barry, Aug 23 '17 at 16:53

score 0 · Answer 3 · answered Aug 23 '17 at 13:42

0

Because the only thing you can omit from the path is index.js

So if you have

import Header from '../components/Header';

It is the same as

import Header from '../components/Header/index.js';

But if you type

import { Header } from '../components';

Interpreter expects that in the file ../components/index.js or it could be just ../components.js if components is a file and not a folder, it will find a named export

export const Header = () => {...}

More about exports

answered Aug 23 '17 at 13:42

Dmitriy Nevzorov

6,042
1
20
28

Yeah, I have an index.js file in components which imports things from the subfolders of `components/` and then exports them, which I don't really understand why its not working the way I expected – Chris Barry Aug 23 '17 at 13:53

ES6 Modules not importing as expected in React

3 Answers3