Solvedreact native router flux Fatal Exception: com.facebook.react.common.JavascriptException: TypeError: undefined is not an object (evaluating 'r.default')

Version

Tell us which versions you are using:

  • "react-native-router-flux": "^4.0.0-beta.31"
  • "react-native": "0.56.0"

-- issue
When i add drawer getting exception and app crash on release apk, when i run app in debug it will compile and run fine.

My Drawer code

 <Drawer
                    hideNavBar
                    key="drawerMain"
                    contentComponent={SideBar}
                    drawerImage={MenuIcon}
                    drawerWidth={300}
                    type="reset">

                 

                    <Stack
                        initial
                        key="HomeWithMap"
                        title="home"
                        tabBarLabel="Profile"
                        inactiveBackgroundColor="#FFF"
                        activeBackgroundColor="#004E9E"
                        icon={TabIcon}
                        navigationBarStyle={{ backgroundColor: '#004E9E' }}
                        titleStyle={{ color: 'white', alignSelf: 'center' }}>
                        <Scene
                            key="HomeScreenMap"
                            initial={false}
                            navBar={CustomNavBar}
                            component={HomeScreenWithMap}
                            type="reset"
                        ></Scene>

                    </Stack>

                    <Stack
                        key="HomeWithList"
                        title="home"
                        tabBarLabel="Profile"
                        inactiveBackgroundColor="#FFF"
                        activeBackgroundColor="#004E9E"
                        icon={TabIcon}
                        navigationBarStyle={{ backgroundColor: '#004E9E' }}
                        titleStyle={{ color: 'white', alignSelf: 'center' }}>

                        <Scene
                            key="HomeScreenList"
                            navBar={CustomNavBar}
                            component={HomeScreenWithList}
                            type="reset"
                        ></Scene>


                    </Stack>


                </Drawer>

--Exception

Fatal Exception: com.facebook.react.common.JavascriptException: TypeError: undefined is not an object (evaluating 'r.default')

This error is located at:
in Unknown
in t
in RCTView
in RCTView
in t, stack:
w@380:1598
processScene@310:16513
oe@310:14574
processScene@310:15557
create@310:11694
w@401:4077
tr@106:42936
Nr@106:56528
Ur@106:56960
ui@106:61804
oi@106:61224
ri@106:60352
Ir@106:59332
di@106:66528
hi@106:66840
render@106:69158
exports@283:440
run@279:601
runApplication@279:2051
value@18:3329
@18:912
value@18:2598
value@18:884

   at com.facebook.react.modules.core.ExceptionsManagerModule.showOrThrowError(ExceptionsManagerModule.java:54)
   at com.facebook.react.modules.core.ExceptionsManagerModule.reportFatalException(ExceptionsManagerModule.java:38)
   at java.lang.reflect.Method.invoke(Method.java)
   at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372)
   at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:160)
   at com.facebook.react.bridge.queue.NativeRunnable.run(NativeRunnable.java)
   at android.os.Handler.handleCallback(Handler.java:739)
   at android.os.Handler.dispatchMessage(Handler.java:95)
   at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:29)
   at android.os.Looper.loop(Looper.java:148)
   at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:192)
   at java.lang.Thread.run(Thread.java:818)
33 Answers

✔️Accepted Answer

run this package.json snippet in postinstall or manually before release:

For older react-navigation (where SwitchRouter is not available)

{
  "scripts": {
    "fix:react-navigation": "sed -i '' 's/ TabRouter/ tabRouter/g' ./node_modules/react-navigation/src/navigators/DrawerNavigator.js && sed -i '' 's/ StackRouter/ stackRouter/g' ./node_modules/react-navigation/src/navigators/StackNavigator.js && sed -i '' 's/ TabRouter/ tabRouter/g' ./node_modules/react-navigation/src/navigators/TabNavigator.js"
  }
}

For newer react-navigation (where SwitchRouter is available)

{
  "scripts": {
    "fix:react-navigation": "sed -i '' 's/ TabRouter/ tabRouter/g' ./node_modules/react-navigation/src/navigators/DrawerNavigator.js && sed -i '' 's/ StackRouter/ stackRouter/g' ./node_modules/react-navigation/src/navigators/StackNavigator.js && sed -i '' 's/ TabRouter/ tabRouter/g' ./node_modules/react-navigation/src/navigators/TabNavigator.js && sed -i '' 's/ SwitchRouter/ switchRouter/g' ./node_modules/react-navigation/src/navigators/SwitchNavigator.js"
  }
}

should fix the issue until react-navigation releases patch for this

Other Answers:

So the cause of error is just stupid.
In node_modules/react-navigation/src/navigators/DrawerNavigator.js there is imported TabRouter, which seems like component (starts with upper case), but in reality is just function, so when the code reaches const contentRouter = TabRouter(routeConfigs, tabsConfig); it throws that error because it does not resolve it as function? It does not even run it.
This is some new babel config stuff or something, which is just weird space of js for me...

So one way to fix this is to rename all TabRouter in that file to tabRouter. I hate to modify node_modules files, I bet there must be way to say to compiler (or whatever) that TabRouter as function is ok?

I execute this command from the project root, to fix it:

sed -i -e 's/TabRouter/tabRouter/g' node_modules/react-navigation/src/navigators/DrawerNavigator.js
sed -i -e 's/\/routers\/tabRouter/\/routers\/TabRouter/g' node_modules/react-navigation/src/navigators/DrawerNavigator.js

Ok got it working now, only doing what you suggested editing these 3 lines in node_modules/react-navigation/src/navigators/DrawerNavigator.js:

  import tabRouter from '../routers/TabRouter';
  const contentRouter = tabRouter(routeConfigs, tabsConfig);
  const drawerRouter = tabRouter(

same,

I have no the DrawerNavigator.js file.