I'm having problems trying to debug in react native. I am able to debug with react native debugger, or simply in the browser. But the error messages i'm getting usually don't point to the line that is causing the error. For example i'll get ubiquitous errors like these:
ExceptionsManager.js:44 ReferenceError: object is not defined
This error is located at:
in Navigator (at createAppContainer.js:430)
in NavigationContainer (at SceneView.js:9)
in SceneView (at SwitchView.js:12)
in SwitchView (at createNavigator.js:80)
in Navigator (at createAppContainer.js:430)
in NavigationContainer (at App.js:59)
in StyleProvider (at App.js:57)
in MobXProvider (at App.js:56)
in App (at renderApplication.js:40)
in RCTView (at AppContainer.js:101)
in RCTView (at AppContainer.js:119)
in AppContainer (at renderApplication.js:39)
Is there a way to debug and get a correct stacktrace leading to the actual cause of the error?
EDIT: I found the problem. My code looked something like this:
//LoggedInNavigator.js
import React from 'react';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import { Button, Footer, FooterTab } from 'native-base';
import SetupNavigator from './SetupNavigator';
import PremiumNavigator from './PremiumNavigator';
SetupNavigator.navigationOptions = ({ navigation: { state: { routes, index } } }) => {
let tabBarVisible = false;
return {
tabBarVisible,object //<this was the problem
};
};
PremiumNavigator.navigationOptions = ({ navigation: { state: { routes, index } } }) => {
let tabBarVisible = false;
return {
tabBarVisible,
};
};
//some more navigators here
const navigators = {
Setup: SetupNavigator,
Premium: PremiumNavigator,
};
console.log('navigators = ', navigators);
const loggedInNav = createBottomTabNavigator({
...navigators
},
{
initialRouteName: 'SetupNavigator',
tabBarPosition: 'bottom',
tabBarComponent: props => {
return (
<Footer style={{ height: 58 }}>
<FooterTab style={{ alignItems: 'center' }}>
<Button
active={false}
onPress={() => props.navigation.navigate('HotelInfo')}>
//tabbar content
</Button>
</FooterTab>
</Footer>
);
},
defaultNavigationOptions: ({ navigation }) => ({
tabBarVisible: false,
}),
}
);
export default createAppContainer(loggedInNav);
Like the comment in the code points out the problem was a simple error. Is there something i could have done that would make my debugger point out the line/file where this error originated? I realize now ( in hindsight) that the error message is correct in pointing out that 'object' doesn't exist, but this isn't very helpful since i can't find the source of the error and this isn't the only instance in my project where 'object' is used nor can i assume this error was even originated in my own codebase.