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 importa
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
4 Answers
Reset to default 2You 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.