app works with no-minify option, but failed with minify on

[ctse]

Stuck a few days already, please help!!

I have tested my app with expo start in dev mode, and it worked perfectly for both iOS and Android. However, when I tried with expo build:android, the apk would crashed for some specific sequence of actions.

To debug, I used: “expo start --no-dev --minify” to mimic production and then tested it on the Android Studio simulator. It also failed.

But if I do “expo start --no-dev --no-minify” it worked!

These observation together with the following message from the Android simulator log:

*11-29 14:56:00.340 10135 7263 7419 E ReactNativeJS: Error: Requiring unknown module “undefined”.

seems to imply something wrong with the module dependencies not being captured properly.

The culprit is likely the react-native-calendar module, because when the fetched data results in some visual changes (in this case showing some dots on the date cell), it would crash.

Here is the expo diagnostics:

Expo CLI 4.0.3 environment info:
System:
OS: Windows 10 10.0.19041
Binaries:
Node: 12.19.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
IDEs:
Android Studio: Version 4.1.0.0 AI-201.8743.12.41.6953283
npmPackages:
expo: ^37.0.0 => 37.0.12
react: 16.9.0 => 16.9.0
react-native: https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz => 0.61.4
react-navigation: 1.5.13 => 1.5.13
Expo Workflow: managed

And here is my package.json:

{
“main”: “node_modules/expo/AppEntry.js”,
“private”: true,
“scripts”: {
“test”: “node ./node_modules/jest/bin/jest.js --watch”
},
“jest”: {
“preset”: “jest-expo”
},
“dependencies”: {
“@react-native-community/datetimepicker”: “2.2.2”,
“axios”: “^0.21.0”,
“ex-react-native-i18n”: “^0.0.6”,
“expo”: “^37.0.0”,
“expo-asset”: “~8.1.5”,
“expo-av”: “~8.1.0”,
“expo-font”: “~8.1.0”,
“libphonenumber-js”: “^1.8.7”,
“node”: “12.14.0”,
“npm”: “^6.10.0”,
“react”: “16.9.0”,
“react-native”: “https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz”,
“react-native-blink-view”: “^0.0.6”,
“react-native-calendars”: “^1.491.0”,
“react-native-datepicker”: “^1.7.2”,
“react-native-elements”: “3.0.0-alpha.1”,
“react-native-image-resizer”: “^1.3.0”,
“react-native-modal”: “^11.5.6”,
“react-native-modal-dropdown”: “0.7.0”,
“react-native-table-component”: “^1.2.1”,
“react-native-timeline-flatlist”: “^0.6.5”,
“react-native-timeline-listview”: “^0.2.3”,
“react-navigation”: “1.5.13”,
“react-redux”: “^5.0.6”,
“redux”: “^3.7.2”,
“redux-persist”: “<5.0.0”,
“redux-thunk”: “^2.2.0”
},
“devDependencies”: {
“eslint-config-rallycoding”: “^3.1.0”,
“jest-expo”: “^37.0.0”
}
}

[wodin]

Are you able to strip down your app to a small app that still has this problem and post the code here (in a code block)?

[ctse]

Any other ways? Is it related to relative path to modules? Can I specify no-minify when building the android APK to get it done with?

I can give it a shot. It is currently intertwined with redux, thunk, and custom made singleton-ish navigation (when react navigation was highly inefficient and unpredictable back then)…

[wodin]

If you think it’s caused by react-native-calendars then maybe you can create a small new app that uses react-native-calendars and maybe simulates a fetch e.g. with a setTimeout call that sets the data.

It’s difficult to say what’s wrong without being able to reproduce the problem.

[ctse]

Thank you very much for the advice. Understood. As a matter of fact, doing old fashioned console.log has revealed that it might be due to Axios instead. Not related to the calendar. My bad. Just didn’t expect to have to tweak code when things worked in Expo but failed with minify!!!

I am trying to reproduce it now. Once I have minimized the code, I will post here to potentially help others too.

[ctse]

Right now, I don’t think either axios or the calendar is the issue. A quick tracing this morning reveals that the issue happened only during “expo start --no-dev --minify” during rendering().

It is likely certain RN/Redux/Thunk operations are messed up behind the scene.

Here is the sequence of events:

1. As you can see from the Android Simulator error log file that data has been received successfully by the axios call, and that the redux action/reducer has worked to print the data received as highlighted by the orange boxed in the screenshot.

2. From the code screenshot, the red box highlighted the code, within the render() function body, that printed out the debug message in the android simulator error log(also highlighed in red box).

3. From the android simulator error log, you can see that the crash (init exiting) happened right after the “debug message” displayed within the render() function. Not captured but did happen was the brief display of the react-native-calendars component.

As per above, my versions of redux, react-redux, redux-persist, and redux-thunk are pretty old. So, unless you can help me out to debug deeper, my only option now is to upgrade these with quite a bit of code changes, as I can see upgrading to the latest versions of these break my current code.

[ctse]

Finally, it is actually the following Image component being the culprit. Excluding it, everything works. I suspect it is the relative path issue. Likely the minify option somehow loses the handle during run. Any pointers to fix this saving me further R&D time?

{ (this.state.markedDates?(JSON.stringify(this.state.markedDates).search(“color”) <0):true) &&
(

      <View style={styles.ad_row}>
        <Image
          source={require('../../../assets/media/images/ad_banner_1.jpg')}
          style={{height:120*vh, width: 710*vw, marginLeft: 5*vw, marginRight: 5*vw, marginTop: 10*vh}}
        />
      </View>
      )}
    </View>

[ctse]

Three important observations:

1. The Image component works for most rendering/re-rendering. It will only break after the Calendar render dots on the days.

2. I have narrowed down the true cause of the problem down to the “source” attribute of the Image component. If I use:

source={ {uri:‘http://www.settao.com/wp-content/uploads/2017/07/it2.png’}}, then it will work.

3. I tried placing the image in the same directory as the screen component, and it still failed.

Since my ultimate intent is to use uri, S3, CDN, etc to store such more static images, the solution works for me.

While I’d love to help drill down deeper into this clearly Expo/React Native bug, but because of confidentiality and security reasons, I cannot disclose even the skeleton of the code.

For those who have encountered this problem and try to resolve using babel-plugin-module-resolver, please de-prioritize such approach, because of the 3 observations mentioned above.

Good luck!