CODEWITHSUNDEEP
javascriptreactjsreact-nativebabeljses6-modules
Flávio Carvalho
Flávio Carvalho

Reputation: 149

ES6 import/export not behaving as expected

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 becomes 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.

Upvotes: 5

Views: 3191

Answers (4)

Flávio Carvalho
Flávio Carvalho

Reputation: 149

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.

Upvotes: 0

Chenxi Yuan
Chenxi Yuan

Reputation: 164

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

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

Upvotes: 1

jony89
jony89

Reputation: 5367

Seems to be working here :

https://www.webpackbin.com/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 }

Upvotes: 2

Laurens Mäkel
Laurens Mäkel

Reputation: 815

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

Have a look at my index.js in my components 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 './components/index.js'
import Layout from './components/Layout''

Upvotes: 2

Related Questions