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:
components/index.js
starts loading.- it sees needs
containers/headercontainer.js
, suspends. containers/headercontainer.js
starts loading.- it sees needs
import { header } '../components';
, suspends. components/index.js
loading step 1, step no-op.containers/headercontainer.js
starts running again.since
components/index.js
still loading, importedheader
pointing variable hasn't been initialized yet, if didconsole.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-loadingcomponents/index.js
. reorder imports
header
initialized incomponents
. e.g.export { headercontainer } './containers/headercontainer'; export { header } './header';
to
export { header } './header'; export { headercontainer } './containers/headercontainer';
wiki
Comments
Post a Comment