Requiring unknown module “ReactPerf” while integrating React Native with existing Android app

Requiring unknown module “ReactPerf” while integrating React Native with existing Android app

I am trying to integrate the latest React Native build and I'm running into errors. Here is my project setup:
In the app's build.gradle, I import react-native 0.24.1:
dependencies {
  ...
  compile 'com.facebook.react:react-native:0.24.1'
}

The project's build.gradle points to React Native which is in a Git submodule:
allprojects {
    repositories {
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$projectDir/../MyGitSubmodule/AwesomeProject/node_modules/react-native/android"
        }
    }
}

I have otherwise integrated as described in the docs here and upgraded RN in the git submodule as described in the docs here. I've uploaded my stack trace to this pastebin link. To summarize the stack trace as the formatting is hard to read, these are the highlights:

Could not find generated setter for class com.facebook.react.views.text.ReactVirtualTextViewManager -- this applies for a ton of Native classes. Maybe all of them.
Error: Requiring unknown module "ReactPerf". If you are sure the module is there, try restarting the packager or running "npm install"
Got JS Exception: Error: Requiring module "23" which threw an exception
Got JS Exception: ReferenceError: Can't find variable: __fbBatchedBridge
In addition, the emulator shows the red screen of death with the following message -- "Error: Requiring module "8" which threw an exception"

Solutions/Answers:

Answer 1:

Basically, it’s complaining that module ReactPerf is required but it doesn’t exist.

FYI, ReactPerf module: https://www.npmjs.com/package/react-addons-perf.

Logically, we simply need to tell react-native to install this thing.

The tricky part is that if we do that by doing:

npm install react-addons-perf, then we’re installing it “outside” of the react-native dependency. And consequently, it will complain that react-addons-perf requires react package as well.

Solution is that we need to declare this dependency “inside” react-native package. In other words:

Open node_modules/react-native/package.json. You will find

...
"dependencies": {
"absolute-path": "^0.0.0",
"art": "^0.10.0",
"babel-core": "~6.4.5",
"babel-plugin-external-helpers": "~6.4.0",
...
"react": "^0.14.5"
...
}

So, what we need to do is just add react-addons-perf to those.

...
"dependencies": {
"absolute-path": "^0.0.0",
"art": "^0.10.0",
"babel-core": "~6.4.5",
"babel-plugin-external-helpers": "~6.4.0",
...
"react": "^0.14.5",
"react-addons-perf": "^0.14.5", // ADD THIS LINE FOR ReactPerf module
...
}

Then, npm install.

From my experience, the rest of the error such as Requiring module "8" will be gone too.

It worked for me and, hopefully, it works for you too.

References

Loading...