最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - ES6 importexport not behaving as expected - Stack Overflow

programmeradmin2浏览0评论

I'm not sure if its react-native related but those are my versions:

"react-native": "0.46.4", "babel-preset-react-native": "2.1.0",

// src/utils/a.js
export default 'a file works!'

// src/utils/b.js
export default 'b file works!'

// src/utils/index.js
import a from './a'
import b from './b'

export { a, b }

And basically when I try to:

import * as utils from 'src/utils'
// or
import { a, b } from 'src/utils'

It returns undefined "a" and "b" properties, like

utils = { a: undefined, b: undefined }

I have no idea what I'm doing wrong here, my guess is those a/b.js files are not loading when they should be, one hack I did before was on a listener function, utils.auth, where I had to if (auth && auth.listener), and that worked, because right when the app starts, listener is undefined, but then right after it bees what it is supposed to be.

Edit: It seems that if I try:

// src/utils/index.js
const a = 'a works'
const b = 'b works'

export { a, b }

the result is the same.

I'm not sure if its react-native related but those are my versions:

"react-native": "0.46.4", "babel-preset-react-native": "2.1.0",

// src/utils/a.js
export default 'a file works!'

// src/utils/b.js
export default 'b file works!'

// src/utils/index.js
import a from './a'
import b from './b'

export { a, b }

And basically when I try to:

import * as utils from 'src/utils'
// or
import { a, b } from 'src/utils'

It returns undefined "a" and "b" properties, like

utils = { a: undefined, b: undefined }

I have no idea what I'm doing wrong here, my guess is those a/b.js files are not loading when they should be, one hack I did before was on a listener function, utils.auth, where I had to if (auth && auth.listener), and that worked, because right when the app starts, listener is undefined, but then right after it bees what it is supposed to be.

Edit: It seems that if I try:

// src/utils/index.js
const a = 'a works'
const b = 'b works'

export { a, b }

the result is the same.

Share Improve this question edited Aug 23, 2017 at 12:52 Flávio Carvalho asked Aug 23, 2017 at 12:41 Flávio CarvalhoFlávio Carvalho 1492 silver badges11 bronze badges 4
  • 1 Generally when you get undefined for a module that clearly exports a value, it is because of a cyclic dependencies in your modules. For example if you tries to import a from utils while utils was still loading, it won't have exported the value yet. – loganfsmyth Commented Aug 23, 2017 at 16:04
  • Exactly, thats what I believe is happening, but what can i do about it? – Flávio Carvalho Commented Aug 23, 2017 at 16:08
  • 1 The snippets of code you have shown won't cause it, so it's hard to say. Ideally you'd shuffle your code around so it doesn't have cycles. – loganfsmyth Commented Aug 23, 2017 at 16:09
  • @loganfsmyth yes that was the cause, I'm not sure how I would have done it differently, but if I import a from 'src/utils/a' it just works as expected, it's something to do with the module cycles as you said before. – Flávio Carvalho Commented Aug 24, 2017 at 9:01
Add a ment  | 

4 Answers 4

Reset to default 2

You basically can export a file without having to import it.

Have a look at my index.js in my ponents folder:

export {Content} from './Content'
export {FilterSelect} from './FilterSelect'
export {ListItem} from './ListItem'
export {Searchbar} from './Searchbar'
export {Sidebar} from './Sidebar'
export {RequiredArgument} from './RequiredArgument'
export {Loading} from './Loading'
export {ArgumentProvided} from './ArgumentProvided'
export {OverviewBar} from './OverviewBar'
export {Home} from './Home'
export {Layout} from './Layout'

And this is how I import them

import { Content, FilterSelect, ListItem, Searchbar, Sidebar, Loading, RequiredArgument, ArgumentProvided, OverviewBar} from './ponents/index.js'
import Layout from './ponents/Layout''

Seems to be working here :

https://www.webpackbin./bins/-KsEA7P7lKOuBugEy1jd

Are you sure you have all the needed babel presets ? (ES2015, STAGE-0,..)

In addition you might try to export this way :

import _a from './a'
import _b from './b'

export { _a as a, _b as b }

In your import file, you are missing './' before 'src'

import * as utils from './src/utils'
// or
import { a, b } from './src/utils'

Thank you for your help guys. So what I found that worked was:

import a from 'src/utils/a'

As @loganfsmyth said, this happened because utils was still loading when I tried to load a. Still not sure if it's related to react-native module imports or something else though.

发布评论

评论列表(0)

  1. 暂无评论