javascript - ES6 Modules not importing as expected in React -

i've been having issue importing react class container

my file organization 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 './header'; import './header.scss';  export default header; 

and components/index.js is

export header './header'; 

and containers/headercontainer.js trying import with

import { header } '../components'; 

however, doesn't work, header undefined.

if use import * components '../components';, header listed, using components.header again undefined.

however, works if instead do

import header '../components/header'; 

can explain why first 2 methods don't seem working? i've done before way, , cannot figure out may have changed (admittedly, part of reason i'm asking type out new way , seeing if helps)

additionally, i've been able use

import { header } './components'; 

from index file in main directory, worked perfectly. issue seems somehow import { header } '../components' only

you have cyclical dependency issue. consider:

1. components/index.js starts loading.
2. it sees needs containers/headercontainer.js, suspends.
3. containers/headercontainer.js starts loading.
4. it sees needs import { header } '../components';, suspends.
5. components/index.js loading step 1, step no-op.
6. containers/headercontainer.js starts running again.

7. since components/index.js still loading, imported header pointing variable hasn't been initialized yet, if did

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

babel's behavior in situation make header undefined. in real native es6 module environment, throw exception because header wasn't initialized yet.

there 2 main options fix this. either 1 should help:

• import ../components/header directly avoid already-loading components/index.js.

• reorder imports header initialized in components. e.g.

  export { headercontainer } './containers/headercontainer'; export { header } './header'; 

  to

  export { header } './header'; export { headercontainer } './containers/headercontainer'; 

wiki