[ios] RNCWKWebview not found in the UIManager.

Bug description:
When starting react-native server with react-native start, seeing following:

Loading dependency graph...(node:21315) UnhandledPromiseRejectionWarning: Error: jest-haste-map: Haste module naming collision:
  Duplicate module name: react-native
  Paths: /Users/jay.shah/Documents/iPartner/ios/Pods/React/package.json collides with /Users/jay.shah/Documents/iPartner/node_modules/react-native/package.json

This error is caused by `hasteImpl` returning the same name for different files.
    at setModule (/Users/jay.shah/Documents/iPartner/node_modules/jest-haste-map/build/index.js:569:17)
    at workerReply (/Users/jay.shah/Documents/iPartner/node_modules/jest-haste-map/build/index.js:641:9)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
(node:21315) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:21315) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:21315) UnhandledPromiseRejectionWarning: Error: jest-haste-map: Haste module naming collision:
  Duplicate module name: react-native
  Paths: /Users/jay.shah/Documents/iPartner/ios/Pods/React/package.json collides with /Users/jay.shah/Documents/iPartner/node_modules/react-native/package.json

This error is caused by `hasteImpl` returning the same name for different files.
    at setModule (/Users/jay.shah/Documents/iPartner/node_modules/jest-haste-map/build/index.js:569:17)
    at workerReply (/Users/jay.shah/Documents/iPartner/node_modules/jest-haste-map/build/index.js:641:9)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
(node:21315) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 3)

To Reproduce:

npm install react-native-webview
react-native-link react-native-webview
cd ios && pod install

My podfile looks like this:

target 'MumboJumbo' do
  # Comment the next line if you're not using Swift and don't want to use dynamic frameworks
  use_frameworks!
  # Pods for help
  pod 'SwiftLint'
  pod 'Charts','3.0.2'
  pod 'Firebase/Core','4.0.4'
  pod 'Firebase/Messaging','4.0.4'
  pod 'GoogleTagManager', '~> 6.0'
  pod 'NewRelicAgent' , '6.4.0'
  pod 'react-native-webview', :path => '../node_modules/react-native-webview'

end

Expected behavior:
No errors in react-native server

Screenshots/Videos:
I have tried and followed: http://facebook.github.io/react-native/docs/integration-with-existing-apps podfile,
so modified podfile looks like following:

target 'MumboJumbo' do
  # Comment the next line if you're not using Swift and don't want to use dynamic frameworks
  use_frameworks!
  # Your 'node_modules' directory is probably in the root of your project,
  # but if not, adjust the `:path` accordingly
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
  'Core',
  'CxxBridge', # Include this for RN >= 0.47
  'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
  'RCTText',
  'RCTNetwork',
  'RCTWebSocket', # Needed for debugging
  'RCTAnimation', # Needed for FlatList and animations running on native UI thread
  # Add any other subspecs you want to use in your project
  ]
  # Explicitly include Yoga if you are using RN >= 0.42.0
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
  
  # Third party deps podspec link
  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

  # Pods for help
  pod 'SwiftLint'
  pod 'Charts','3.0.2'
  pod 'Firebase/Core','4.0.4'
  pod 'Firebase/Messaging','4.0.4'
  pod 'GoogleTagManager', '~> 6.0'
  pod 'NewRelicAgent' , '6.4.0'
  pod 'react-native-webview', :path => '../node_modules/react-native-webview'

end

but it results in following when buildin the project in ios :

Showing Recent Messages
  "_JSObjectCallAsConstructor", referenced from:
      facebook::jsc::JSCRuntime::callAsConstructor(facebook::jsi::Function const&, facebook::jsi::Value const*, unsigned long) in libReact.a(JSCRuntime.o)
Showing Recent Messages
ld: symbol(s) not found for architecture x86_64

The above is fixed by adding JavascriptCore.framework in linking library phase.
Now the build is successful and react-native server is working fine but still:

In short I have followed everything mentioned in https://engineering.brigad.co/demystifying-react-native-modules-linking-ae6c017a6b4a But still:

RNCWKWebview not found in the UIManager.

Environment:

  • OS: Mac Os high sierra
  • OS version: 10.13.6
  • react-native version: 0.59.8
  • react-native-webview version: 5.12.1

3 thoughts on “[ios] RNCWKWebview not found in the UIManager.

  1. Pingback: Azure DevOps
  2. Pingback: DevSecOps

Comments are closed.