0

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.

user3512797
  • 303
  • 4
  • 7
  • it's probably not an issue with the debugger but your `createAppContainer.js`. Can you show us the code from this file? – Neeko Dec 09 '19 at 17:26
  • can you share your code please so that we can check? – Gaurav Roy Dec 10 '19 at 05:55
  • alright. I already found the solution to the error ( i updated the original post with code), but i'd still like to know how i would have been able to debug this normally without accidentally stumbling upon the answer. thanks in advance – user3512797 Dec 10 '19 at 10:59

0 Answers0