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

[RupeshVM]

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)

[CptFabulouso]

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?

[RupeshVM]

@CptFabulouso right ..its working..thank you

[ebaynaud]

So many thanks. Any proper fix somewhere to this issue? I mean not modifying node_modules manually?

[ebaynaud]

@CptFabulouso could you please explain how did you find the origin of the issue? After renaming TabRouter to tabRouter I still get the r.default issue...

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

Also tried to do that in all other Navigators without success...

If you explain how you did find the issue, I may be able to find what's still wrong.

Still getting for now: ReactNativeJS: undefined is not an object (evaluating 'r.default')

[CptFabulouso]

I used console logs (viewed them in android studio) to track where the code throws error. Did you also fix the next line after contentRouter?

const contentRouter = tabRouter(routeConfigs, tabsConfig);
const drawerRouter = tabRouter(

[ebaynaud]

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(

[ebaynaud]

Would be great to find the route cause and fix it because now the only (_not so_) clean solution I found is:

• forking react-navigation
• commiting modifications in DrawerNavigator react-navigation in 1.x branch
• add this to my package.json:

  "resolutions": {
    "react-native-router-flux/**/react-navigation": "https://github.com/ebaynaud/react-navigation.git#1.x"
  },

Had also submit a PR on react-navigation: https://github.com/react-navigation/react-navigation/pull/4699

[mmamoyco]

@ebaynaud what version of react-navigation you using?

[ebaynaud]

Initially that was the one specified in current RNRF dependencies, so 1.5.8.
Now I forked the last one in react-navigation 1.x branch (latest release is 1.5.11) and performed the modifications in my fork: https://github.com/ebaynaud/react-navigation.git#1.x

[mmamoyco]

@ebaynaud solution worked for me, will wait for PR submttion

[CptFabulouso]

May this be related to this?

[ebaynaud]

Unfortunately my PR https://github.com/react-navigation/react-navigation/pull/4699 was rejected due to the lack of information provided. Do someone can explain this?

[danielzzz]

@ebaynaud thanks for the fix, it worked for me!

[TwilightOwl]

this is because babel plugin which allows instance creation without "new" keyword is removed from babel 7 https://babeljs.io/docs/en/babel-plugin-transform-class-constructor-call

[Amnesthesia]

I'm hitting this too :( This was insanely confusing to debug

[CptFabulouso]

This may be a more proper workaround for this problem. I've seen it work in a project, not have tried in one of mine yet.

[Amnesthesia]

I've already done that — works in debug mode, still crashes in release

[pavjacko]

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

[bulatshafigullin]

@pavjacko With these fixes applied, still can't run it in release mode (debug mode is ok)
2018-08-07 15:24:35.636 [error][tid:com.facebook.react.JavaScript] TypeError: undefined is not an object (evaluating 't.default')

[danielzzz]

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

[rishiankush]

I am facing the same issue, I tried everything mentioned above, nothing worked for me.
Debug mode is working fine. Problem occurs in release mode.

RN version: 0.56.0

[konstantin-mohin]

same,

I have no the DrawerNavigator.js file.

[Anujmoglix]

I tried all solution but no luck

[VesperDev]

i sorry but ever have problem

[Anujmoglix]

Worked for me . :)

[VesperDev]

which of all the solutions worked for you or what did you do

[Anujmoglix]

@VesperDev i tried with https://github.com/adamivancza/react-navigation/commit/db8be7cc0b4ac738242ce82bcc2d1f3254a028c0#comments . check it .

[mmamoyco]

@Anujmoglix what version of RN you using?

[Anujmoglix]

0.56

[Pruthvirajcodewave]

Thank you guys, renaming TabRouter to tabRouter in "node_modules/react-navigation/src/navigators/DrawerNavigator.js" file worked for me.

[VesperDev]

Thanks this works.

[skokon]

Thank you guys, renaming TabRouter to tabRouter in "node_modules/react-navigation/src/navigators/DrawerNavigator.js" file worked for me.

Thank you so much!!!!!!!!