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"
  },

Can you provide distributionUrl from android/gradle/wrapper/gradle-wrapper.properties this path and classpath from android/build.gradle this path? I am using this version of react-native-webrtc with react-native v62.2. — Shahnawaz Hossan
– Shahnawaz Hossan, Commented Jun 17, 2020 at 8:15
@ShahnawazHossan distributionUrl=https\://services.gradle.org/distributions/gradle-6.0.1-all.zip com.android.tools.build:gradle:3.5.2 — Ankita
– Ankita, Commented Jun 17, 2020 at 8:34
Please follow the instructions I have answered below. Let me know whether everything is working or not. — Shahnawaz Hossan
– Shahnawaz Hossan, Commented Jun 17, 2020 at 8:36

Shahnawaz Hossan · Accepted Answer · 2020-06-17 08:35:43Z

2

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.

answered Jun 17, 2020 at 8:35

Shahnawaz Hossan

2,7062 gold badges15 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ankita Over a year ago

this wont affect my future android builds?

Shahnawaz Hossan Over a year ago

Try creating a new project and follow the steps. I have checked it up right now. Also, are you using react-native-cli ?

Shahnawaz Hossan Over a year ago

I will recommend you to create a new app and try this. This has worked for me.

Shahnawaz Hossan Over a year ago

And this won't affect your future android builds. If it goes well on your current app then ok and if not then create a new app and try these steps.

Ankita Over a year ago

It is working for new react-native app but in my existing app it is not working

Ankita · Accepted Answer · 2020-06-22 06:12:42Z

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

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"]
  }

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"/>

Collectives™ on Stack Overflow

Module not found for React Ntaive Webrtc while creating Android build

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related