Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 208
Flávio Carvalho Avatar asked Aug 23 '17 12:08

Flávio Carvalho


2 Answers

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''
like image 177
Laurens Mäkel Avatar answered Sep 21 '22 15:09

Laurens Mäkel


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 }
like image 21
jony89 Avatar answered Sep 23 '22 15:09

jony89