React Native call components in imports js

Question

I have an import.js and I am writting all modules' path in there. For example. color.js and button.js is recognized in import.js. And then I want to call my imports from there in the other components. And I can call all modules' imports in the main.js. But in button.js , I can't call color.js When one of js file is imported in import.js, It can't call any js file in import.js. Also It is giving this error:

1.undefined is not an object (evaluating 'COLOR.BUTTONDARK')

2.[fatal][tid:com.facebook.react.RCTExceptionsManagerQueue] Unhandled JS Exception: undefined is not an object (evaluating 'COLOR.BUTTONDARK')

3.[error][tid:com.facebook.react.JavaScript] Module AppRegistry is not a registered callable module.

//import.js module.exports = { BUTTON: require('./../components/XYZButton'), COLOR: require('./../styles/colors'), }; //colors.js module.exports = { BUTTONDARK: '#084C6E', TEXTLIGHT: '#FFFFFF' }; //xyzbutton.js const COLOR = require('./../constants/imports'); class XYZButton extends React.Component { render() { return ( <TouchableHighlight> <View style={{backgroundColor:COLOR.BUTTONDARK}}> <Text style={{color:COLOR.TEXTLIGHT}}> {'TEST'} </Text> </View> </TouchableHighlight> ); } } module.exports = (XYZButton); //main.js const {BUTTON, COLOR} = require('./../../../../constants/imports'); class Main extends React.Component { render() { return ( <View style={{backgroundColor:COLOR.BUTTONDARK}}> <BUTTON onPress = {() => { this._handleSelectModulPage() }} style = {{ alignItems: 'center', justifyContent: 'center' }} /> </View> ); } } module.exports = (Main);

agmcleod · Accepted Answer · 2016-07-20 13:48:01Z

I think you have a cyclic dependency. Where you are requiring something that is defined before it finishes importing its definitions itself.

main.js requires imports.js
imports.js requires XYZButton.js
XYZButton.js requires imports.js, which at this point hasn't finished loading its own dependencies. It will then return an undefined object, which gives you your error with your COLOR constant.

What you actually want to do is scrap the imports.js entirely, and just require relative paths from your other files. Having an imports.js file doesn't really give you any benefit.

Exactly this. If A requires B, and B requires A, then when A loads, it's going to try to load B, and when B loads, it's going to try to load A, and so on and so forth.

Collectives™ on Stack Overflow

React Native call components in imports js

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related