reactjstypescriptreact-nativemonoreporelease-builds

React Native Monorepo project doesn't work on release build


I am experimenting Monorepo using yarn workspaces method containing a sample react-native project which is configured and it works fine in debug build. When I created a release build and run the app, it crashes as soon as it opens. I have provided the log and the code below.

Android Studio Logcat:

2022-05-16 23:18:08.466 6620-6644/? E/AndroidRuntime: FATAL EXCEPTION: create_react_context
Process: com.sample.mobile, PID: 6620
java.lang.RuntimeException: Unable to load script. Make sure you're either running Metro (run 'npx react-native start') or that your bundle 'index.android.bundle' is packaged correctly for release.
    at com.facebook.react.bridge.CatalystInstanceImpl.jniLoadScriptFromAssets(Native Method)
    at com.facebook.react.bridge.CatalystInstanceImpl.loadScriptFromAssets(CatalystInstanceImpl.java:248)
    at com.facebook.react.bridge.JSBundleLoader$1.loadScript(JSBundleLoader.java:29)
    at com.facebook.react.bridge.CatalystInstanceImpl.runJSBundle(CatalystInstanceImpl.java:277)
    at com.facebook.react.ReactInstanceManager.createReactContext(ReactInstanceManager.java:1422)
    at com.facebook.react.ReactInstanceManager.access$1200(ReactInstanceManager.java:138)
    at com.facebook.react.ReactInstanceManager$5.run(ReactInstanceManager.java:1111)
    at java.lang.Thread.run(Thread.java:923)

Monorepo structure:

monorepo
    |
    |___Common
    |
    |___Mobile

Monorepo's root package.json:

{
   "name": "monorepo",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "license": "UNLICENSED",
   "workspaces": {
     "packages": [
       "packages/*"
     ],
     "nohoist": [
       "**/react-native",
       "**/react-native/**"
     ]
   },
   "references": [
     {
       "path": "packages/Common"
     },
     {
       "path": "packages/Mobile"
     }
   ],
   "private": true
 }

Common's root package.json

{
   "name": "common",
   "version": "1.0.0",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "license": "UNLICENSED",
   "devDependencies": {
     "@types/react": "^18.0.9",
     "@types/react-native": "^0.67.7"
   }
 }

React Native's package.json:

...
 "peerDependencies": {
    "common": "0.0.1"
 },
...

React Native's metro.config.js

const path = require('path');
module.exports = {
    transformer: {
        getTransformOptions: async () => ({
            transform: {
                experimentalImportSupport: false,
                inlineRequires: true,
            },
        }),
    },
    resolver: {
        sourceExts: ['jsx', 'js', 'ts', 'tsx', 'mjs'],
        extraNodeModules: new Proxy(
            {},
            {
              get: (target, name) => {
                return path.join(__dirname, `node_modules/${name}`);
              },
            },
          ),
    },
    watchFolders: [
        path.resolve(__dirname),
        path.resolve(__dirname.replace('Mobile', 'Common'))
    ],
};

Any Suggestions?


Solution

  • I figured out that the issue was not on the monorepo setup but React Native itself. I am using the latest version of React Native (0.68.2) which was causing this issue. I verified this my creating a simple fresh React Native Project in which this same issue occurs. There are also issues open in the React Native repo itself.