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

Comments

Popular posts from this blog

Asterisk AGI Python Script to Dialplan does not work -

python - Read npy file directly from S3 StreamingBody -

kotlin - Out-projected type in generic interface prohibits the use of metod with generic parameter -