Monorepo with Yarn for React Native projects, Bundle error

Question

I want to create a monorepo with Yarn to work with React-Native, this is necessary because I want to keep backend frontend and app in the same repository. My problem occurs when loading the app to my emulator, I will describe what I have so far.

I create the project with the command yarn react-native init App inside the directory Packages, then remove the file Yarn.lock and the directory node_modules from within the project have been created. I return to the root of my project and run yarn so that dependencies are reinstalled.

Then I need to change some path settings in order to install the App in emulated, these changes consist of incrementing ".. /.. /" in the files described below.

App/android/Settings.Radle

apply from: file("../../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)

App/android/app/build.Radle

apply from: file("../../../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

The excerpts described above correspond to the final result after editing. Now I can execute yarn android in the application and the same will install my App in the emulator "correctly".

After installing the App in emulated (or before that, I have both attempts), I run yarn start to initialize the Bundle of my App, this command runs without any error (so far), but when I run the Reload in my app in the emulator I get the following error:

error: Error: Unable to resolve module @babel/runtime/helpers/interopRequireD efault from index.js: @Babel/Runtime/helpers/interopRequireDefault could not be found Within the project.

Just to highlight, the app was installed in the emulator but at no time executed correctly, in case I run Bundle before installing the app on mobile, after running the yarn android the application will open and the same error is issued immediately on Bundle.

My directory structure is as follows:

node_modules
packages
- Server
- Web
- App
- - node_modulos
- - android
- - ios
- - package.json
- - *outros arquivos
package.json
yarn.lock

Some links were very useful to me, but they didn’t solve my problem
https://github.com/react-native-community/cli/issues/591
https://github.com/react-native-community/cli/issues/656
https://github.com/react-native-community/cli/issues/877
https://stackoverflow.com/questions/49373181/babel-preset-not-loading-on-monorepo-project

Environmental data:
OS: Ubuntu 16.04 LTS
Yarn: 1.22.4
Emulator: Android Studio

Note: the project works normally if your do not put it within the Yarn monorepo structure, which indicates that there is no problem with the emulator.

I really appreciate it if someone can tell me what I’m missing here.

Answer 1

I found the solution to the problem, so that the app can find all project dependencies need to include the parameter watchFolders to the archive metro.config.js, the final result of this file is as follows

const path = require('path');

module.exports = {
  watchFolders: [path.resolve(__dirname, '..', '..')],
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
};

Point watchFolders to the root folder of your project.

If your application automatically closes when opening after the previous change, access the file App/android/app/build.Radle and edit the parameters enableSeparateBuildPerCPUArchitecture and universalApk for true. More details about this on https://github.com/facebook/react-native/issues/28489

If the previous change does not work, return the parameters to the default value and follow the steps below.

Include dependency React-Native at the package json. from the root of your project, you can do this using yarn add react-native -W, delete the node_modules folder from within the App and run yarn to install the dependencies again (just in case).

Access the following list of files:

• App/android/build.Radle
• App/android/app/build.Radle
• App/Ios/Podfile
• App/Ios/App.xcodeproj/project.pbxproj

Note: the folder containing the project.pbxproj file will be named after your project.

In each of the files find any mention of node_modules/React-Native and include at the beginning of the path ../../ (the final path after being modified needs to match the node modules from the root of your project)

After doing this, initialize your project’s Bundle yarn start and then yarn android, now everything should work well.

I have not tested the solution for Ios, if someone can test and leave in the comments would be nice.

Depending on your project needs, more changes are needed to run it, this link can be useful: https://engineering.brigad.co/react-native-monorepos-code-sharing-f6c08172b417