Invariant Violation: Native Module Cannot be Null

[gitforanand]

🐛 Bug Report

Followed the instruction for IOS with react-native-fbsdk and trying to implement a custom button for FB Login with Login Manager and fails with 4.40.

To Reproduce

1. react-native-init project
2. npm install react-native-fbsdk
3. cd ios && pod install && cd ..
4. Place login button.
5. when npm run ios received the error

Expected Behavior

A FB login embedded browser comes up for Login using FB.

Code Example

import React, {Component} from 'react'; import {Avatar} from 'react-native-elements'; const FBSDK = require('react-native-fbsdk'); const {LoginManager, AccessToken} = FBSDK;

export default class FBLoginButton extends Component { constructor(props) { super(props); this.state = {isCancelled: false, isLoggedin: false}; } fbLogin = async () => { console.log('FB Trrigger'); LoginManager.logInWithPermissions(['public_profile']).then( function(result) { if (result.isCancelled) { alert('Login was cancelled'); } else { alert( 'Login was successful with permissions: ' + result.grantedPermissions.toString(), ); } }, function(error) { alert('Login failed with error: ' + error); }, ); // await LoginManager.logInWithPermissions(['email']) // .then( // result => { // if (result.isCancelled) { // console.log('FB Cancelled'); // alert('Login was cancelled'); // } else { // console.log('FB Kickd'); // alert( // 'Login was successful with permissions: ' + // result.grantedPermissions.toString(), // ); // AccessToken.getCurrentAccessToken() // .then(data => { // const token = data.accessToken.toString(); // console.log('facebook initialLogin'); // console.log(token); // }) // .catch(error => { // console.log(error); // }); // } // }, // error => { // alert('Login failed with error: ' + error); // }, // ) // .catch(error => console.log(error)); }; render() { return ( <Avatar rounded size="medium" icon={{name: 'facebook', type: 'material-community'}} iconStyle={{marginRight: 50}} containerStyle={{ marginTop: 0, marginRight: 20, marginLeft: 20, }} overlayContainerStyle={{backgroundColor: '#4e39c4'}} onPress={this.fbLogin} /> ); } }

module.exports = FBLoginButton;

Environment

System: OS: macOS 10.15.3 CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz Memory: 74.43 MB / 32.00 GB Shell: 5.7.1 - /bin/zsh Binaries: Node: 13.5.0 - ~/.nvm/versions/node/v13.5.0/bin/node npm: 6.13.7 - ~/.nvm/versions/node/v13.5.0/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1 IDEs: Android Studio: 3.5 AI-191.8026.42.35.6010548 Xcode: 11.3/11C29 - /usr/bin/xcodebuild npmPackages: react: 16.9.0 => 16.9.0 react-native: 0.61.5 => 0.61.5 npmGlobalPackages: react-native: 0.61.5

[gitforanand]

Error: Invariant Violation: Native module cannot be null.

constructor NativeEventEmitter.js:36:16

FBAccessToken.js:29:44 loadModuleImplementation require.js:322:6 FBLoginButton.js:4:21 loadModuleImplementation require.js:322:6 Login.js:47:18 loadModuleImplementation require.js:322:6 AppNavigation.js:4 loadModuleImplementation require.js:322:6 App.js:10 loadModuleImplementation require.js:322:6 index.js:6 loadModuleImplementation require.js:322:6 guardedLoadModule require.js:201:45 global code index.bundle?platform=ios&dev=true&minify=false:163133:4

[danish519]

TRY THIS facebook = async () => { let result; try { LoginManager.setLoginBehavior('NATIVE_ONLY'); result = await LoginManager.logInWithPermissions(['public_profile', 'email']); } catch (nativeError) { try { LoginManager.setLoginBehavior('WEB_ONLY'); result = await LoginManager.logInWithPermissions(['public_profile', 'email']); } catch (webError) { // show error message to the user if none of the FB screens // did not open } } if (result.isCancelled) { LoginManager.logOut(); // console.log('isCancelled') } else { const accessData = await AccessToken.getCurrentAccessToken(); // Create a graph request asking for user information const infoRequest = new GraphRequest('/me', { accessToken: accessData.accessToken, parameters: { fields: { string: 'id, email' } } }, (err, res) => { if (err) { // console.log('Error---->>>>', err); } else { const user = { email: res.email }; this.props.social_sign_in(user, 'en'); this.logOut(accessData.accessToken); } }, ); // Execute the graph request created above new GraphRequestManager().addRequest(infoRequest).start(); } };

In case of logOut logOut = (access_token) => { let logOut = new GraphRequest( "me/permissions/", { accessToken: access_token, httpMethod: 'DELETE' }, (error, result) => { console.log('LogOut Result---->>>', result); console.log('LogOut Error---->>>', error); if (error) { console.log('Error fetching data: ' + error.toString()); } else { LoginManager.logOut(); } }); new GraphRequestManager().addRequest(logOut).start(); };

[gitforanand]

I got this response

TypeError: undefined is not an object (evaluating 'result.isCancelled') _callee$@http://localhost:8081/AppNavigation/components/Login.bundle?platform=ios&dev=true&minify=false&modulesOnly=true&runModule=false&shallow=true:93:28 tryCatch@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29290:23 invoke@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29465:32 tryCatch@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29290:23 invoke@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29366:30 http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29396:19 tryCallTwo@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:3253:9 doResolve@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:3417:25 Promise@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:3276:14 callInvokeWithMethodAndArg@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29395:29 enqueue@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29400:157 http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29416:69 _callee@http://localhost:8081/AppNavigation/components/Login.bundle?platform=ios&dev=true&minify=false&modulesOnly=true&runModule=false&shallow=true:58:42 touchableHandlePress@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:52921:47 touchableHandlePress@[native code] _performSideEffectsForTransition@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:52358:36 _performSideEffectsForTransition@[native code] _receiveSignal@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:52284:46 _receiveSignal@[native code] touchableHandleResponderRelease@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:52163:26 touchableHandleResponderRelease@[native code] invokeGuardedCallbackImpl@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:12660:21 invokeGuardedCallback@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:12756:42 invokeGuardedCallbackAndCatchFirstError@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:12760:36 executeDispatch@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:12867:48 executeDispatchesInOrder@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:12887:26 executeDispatchesAndRelease@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:12992:35 forEach@[native code] forEachAccumulated@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:12982:22 runEventsInBatch@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:13016:27 runExtractedPluginEventsInBatch@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:13104:25 http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:14130:42 batchedUpdates$1@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:25584:20 batchedUpdates@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:14078:36 _receiveRootNodeIDEvent@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:14129:23 receiveTouches@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:14159:34 callFunction@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:2683:49 http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:2396:31 guard@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:2637:15 callFunctionReturnFlushedQueue@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:2395:21 callFunctionReturnFlushedQueue@[native code]

[gitforanand]

System: OS: macOS 10.15.3 CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz Memory: 3.33 GB / 32.00 GB Shell: 5.7.1 - /bin/zsh Binaries: Node: 13.5.0 - ~/.nvm/versions/node/v13.5.0/bin/node npm: 6.13.7 - ~/.nvm/versions/node/v13.5.0/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1 IDEs: Android Studio: 3.5 AI-191.8026.42.35.6010548 Xcode: 11.3/11C29 - /usr/bin/xcodebuild npmPackages: react: 16.8.6 => 16.8.6 react-native: 0.61.0 => 0.61.0 npmGlobalPackages: react-native: 0.61.5

---

platform :ios, '9.0' require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

target 'imp' do

Pods for imp

pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector" pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec" pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired" pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety" pod 'React', :path => '../node_modules/react-native/' pod 'React-Core', :path => '../node_modules/react-native/' pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules' pod 'React-Core/DevSupport', :path => '../node_modules/react-native/' pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS' pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation' pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob' pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image' pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS' pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network' pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings' pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text' pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration' pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/'

pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact' pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi' pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor' pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector' pod 'ReactCommon/jscallinvoker', :path => "../node_modules/react-native/ReactCommon" pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon" pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

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'

pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

pod 'react-native-fbsdk', :path => '../node_modules/react-native-fbsdk'

---

• FBLazyVector (0.61.0)
• FBReactNativeSpec (0.61.0):
  • Folly (= 2018.10.22.00)
  • RCTRequired (= 0.61.0)
  • RCTTypeSafety (= 0.61.0)
  • React-Core (= 0.61.0)
  • React-jsi (= 0.61.0)
  • ReactCommon/turbomodule/core (= 0.61.0)
• FBSDKCoreKit (5.8.0):
  • FBSDKCoreKit/Basics (= 5.8.0)
  • FBSDKCoreKit/Core (= 5.8.0)
• FBSDKCoreKit/Basics (5.8.0)
• FBSDKCoreKit/Core (5.8.0):
  • FBSDKCoreKit/Basics
• FBSDKLoginKit (5.8.0):
  • FBSDKLoginKit/Login (= 5.8.0)
• FBSDKLoginKit/Login (5.8.0):
  • FBSDKCoreKit (~> 5.0)
• FBSDKShareKit (5.8.0):
  • FBSDKShareKit/Share (= 5.8.0)
• FBSDKShareKit/Share (5.8.0):
  • FBSDKCoreKit (~> 5.0)

---

These worked