Module not found for React Ntaive Webrtc while creating Android build

Question

I added Webrtc https://www.npmjs.com/package/react-native-webrtc module in my react-native-web app.

I used npm i -s react-native-webrtc command. But while creating a build I am getting below error:

Error: Error: Unable to resolve module react-native-webrtc from App.js: react-native-webrtc could not be found within the project or in these directories: node_modules

If you are sure the module exists, try these steps: 1. Clear watchman watches: watchman watch-del-all 2. Delete node_modules: rm -rf node_modules and run yarn install 3. Reset Metro's cache: yarn start --reset-cache 4. Remove the cache: rm -rf /tmp/metro-* at ModuleResolver.resolveDependency (D:\smartek_project\video_conferencing\newchanges\VC_Frontend\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:186:15) at ResolutionRequest.resolveDependency (D:\smartek_project\video_conferencing\newchanges\VC_Frontend\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:52:18) at DependencyGraph.resolveDependency (D:\smartek_project\video_conferencing\newchanges\VC_Frontend\node_modules\metro\src\node-haste\DependencyGraph.js:287:16) at Object.resolve (D:\smartek_project\video_conferencing\newchanges\VC_Frontend\node_modules\metro\src\lib\transformHelpers.js:267:42) at dependencies.map.result (D:\smartek_project\video_conferencing\newchanges\VC_Frontend\node_modules\metro\src\DeltaBundler\traverseDependencies.js:434:31) at Array.map () at resolveDependencies (D:\smartek_project\video_conferencing\newchanges\VC_Frontend\node_modules\metro\src\DeltaBundler\traverseDependencies.js:431:18) at D:\smartek_project\video_conferencing\newchanges\VC_Frontend\node_modules\metro\src\DeltaBundler\traverseDependencies.js:275:33 at Generator.next () at asyncGeneratorStep (D:\smartek_project\video_conferencing\newchanges\VC_Frontend\node_modules\metro\src\DeltaBundler\traverseDependencies.js:87:24)

Here is my package.json dependenci

"dependencies": {
    "@babel/polyfill": "^7.10.1",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-native-community/voice": "^1.1.4",
    "@react-navigation/bottom-tabs": "^5.5.1",
    "@react-navigation/native": "^5.5.0",
    "@react-navigation/stack": "^5.4.1",
    "babel-plugin-react-native-web": "^0.12.2",
    "core-js": "^3.6.5",
    "react": "16.11.0",
    "react-dom": "^16.13.1",
    "react-native": "^0.62.2",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-reanimated": "^1.9.0",
    "react-native-safe-area-context": "^3.0.2",
    "react-native-screens": "^2.8.0",
    "react-native-web": "^0.12.2",
    "react-native-webrtc": "^1.75.3"
  },

Answer 1

I struggled a lot of days with this issue. Simply follow the instructions I have figured out. (I am using react-native-cli)

Step 1:

$ rm -rf node_modules/
$ npm i
$ npm i react-native-webrtc --save

Step 2: Replace distributionUrl by this URL https\://services.gradle.org/distributions/gradle-5.5.1-all.zip

Step 3: Replace your classpath by this classpath("com.android.tools.build:gradle:3.4.1") from android/build.gradle this file.

Step 4:

$ cd android
$ ./gradlew clean
$ cd ..
$ react-native run-android

Hopefully, this will work.

Answer 2

There were two issues due to which I was getting error.

1. The metro.config.js had below line

   
    resolver: {
               blacklistRE: /react-native-web/,
               sourceExts: ["js", "json", "ts", "tsx", "android.js", "ios.js"]
             } 
   
   

due to "blacklistRE" the webrtc module was not include while running the app on android.That is why I was getting module not found error. I solve it by changing into below lines of code

     resolver: {
    blacklistRE: /\react-native-web\b/,
    sourceExts: ["js", "json", "ts", "tsx", "android.js", "ios.js"]
  }

2. After solving this build was getting created but app was not launcing for this I used above suggested changes for android by @Shahnawaz Hossan. And I also updated AndroidManifest.xml in android\app\src\main with below lines:

    <uses-permission android:name="android.permission.CAMERA" />
     <uses-feature android:name="android.hardware.camera" />
     <uses-feature android:name="android.hardware.camera.autofocus"/>
     <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
   

   <uses-permission android:name="android.permission.RECORD_AUDIO" />
   <uses-permission android:name="android.permission.WAKE_LOCK" />
   <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>