Cannot read property 'computeModPow' of undefined - react-native

After I've upgraded my project to react-native 0.64, aws amplify doesn't work properly. Mainly, I'm trying to make an authentification workflow, but the login functionality throws me the "Cannot read property 'computeModPow' of undefined", even if signup function works completely fine.
After digging into the problem, I found that "aws-cognito-identity-js" is the main problem. If I try to link the library, rn bundler throws an error, that "aws-cognito-identity-js" is already linked, or that I can't override it.
Any suggestions?
Package.json
"react": "16.8.6",
"react-native": "0.60.4",
"aws-amplify": "^1.1.32",
"aws-amplify-react-native": "^2.1.15",
Implementation:
export const loginUser = (credentials: any) => async (dispatch: any) => {
dispatch({ type: LOGIN_USER });
try {
const data = await Auth.signIn(credentials.email, credentials.password);
return loginUserSuccess(dispatch, data);
} catch (error) {
return loginUserFail(dispatch, error);
}
};
const loginUserSuccess = (dispatch: any, data: any) => {
console.log({ data });
dispatch({ type: LOGIN_USER_SUCCESS, attributes: {} });
};
const loginUserFail = (dispatch: any, error: any) => {
console.log({ error });
dispatch({ type: LOGIN_USER_FAILED });
};
Error:
"TypeError: Cannot read property 'computeModPow' of undefined
at BigInteger.nativeModPow [as modPow] (blob:file:///6e426a68-ddf4-48ca-86cf-ba3536cb9a13:217690:17)
at AuthenticationHelper.calculateA (blob:file:///6e426a68-ddf4-48ca-86cf-ba3536cb9a13:217990:16)
at AuthenticationHelper.getLargeAValue (blob:file:///6e426a68-ddf4-48ca-86cf-ba3536cb9a13:217928:16)
at new AuthenticationHelper (blob:file:///6e426a68-ddf4-48ca-86cf-ba3536cb9a13:217910:12)
at CognitoUser.authenticateUserDefaultAuth (blob:file:///6e426a68-ddf4-48ca-86cf-ba3536cb9a13:219720:36)
at CognitoUser.authenticateUser (blob:file:///6e426a68-ddf4-48ca-86cf-ba3536cb9a13:219710:23)
at blob:file:///6e426a68-ddf4-48ca-86cf-ba3536cb9a13:185525:14
at tryCallTwo (blob:file:///6e426a68-ddf4-48ca-86cf-ba3536cb9a13:24791:7)
at doResolve (blob:file:///6e426a68-ddf4-48ca-86cf-ba3536cb9a13:24955:15)
at new Promise (blob:file:///6e426a68-ddf4-48ca-86cf-ba3536cb9a13:24814:5)"

I had the same problem and tried to run react-native link amazon-cognito-identity-js according to https://aws-amplify.github.io/docs/js/react#add-auth.
However the Cannot read property 'computeModPow' of undefined error persisted even after cleaning the build, restarting packager, etc.
The problem was that the package never got linked properly with react-native link amazon-cognito-identity-js. This requires us to manually link which is pretty easy to do luckily!
Assuming XCode (Look here to find how to do the similar process for Android) you go to the Project Navigator and right click Libraries folder which contains all your 3rd party .xcodeproj. Choose Add Files... and add the RNAWSCognito.xcodeproj from within the ${projectDir}/node_modules/amazon-cognito-identity-js/ios/ directory. Open the RNAWSCognito.xcodeproj and Products folders and drag libRNAWSCognito.a to Linked Frameworks and Libraries under the General tab. Re-run the project and should be good to go. May have to clean, restart packager, etc.

You can fix this by doing the following:
yarn add amazon-cognito-identity-js
react-native link amazon-cognito-identity-js
cd ios ; pod update ; cd ..
Cheers!

I don't know who needs this, but after I confirmed amazon-cognito-identity-js:
1) was in settings.gradle
2) was in app/build.gradle
I had to make sure to have the below in MainApplication.java
import com.amazonaws.RNAWSCognitoPackage;
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
// eg. new VectorIconsPackage()
new NetInfoPackage(),
new AsyncStoragePackage(),
new RNAWSCognitoPackage()
);
}
Good Luck.

Related

Making a dependency optional in my package used by create-react-app, Vite, and others

We have an npm package #glowbuzzer/controls. This package can make use of STEP file import functionality from occt-import-js, but not all users of #glowbuzzer/controls are interested in STEP files and may not want to add occt-import-js to their package.json (and shouldn't need to).
I am attempting to handle this by doing a dynamic import:
try {
const occtLib = import("occt-import-js");
occtLib.then((occt) => {
// do something with lib
}).catch((err) => {
console.error("Error loading occt-import-js", err);
});
} catch (e) {
console.warn("No occt-import-js found. STEP files will not be supported");
}
However, when using #glowbuzzer/controls in a CRA app, we get the following error:
Module not found: Error: Can't resolve 'occt-import-js'
Project will not run without installing occt-import-js. Is there any way around this error if dependency is not present?
You can't catch static imports errors
Yet, you could use a dynamic import() for that.
It is supported by most browsers & Node and CRA(Tested it out)
const loadModule = async (modulePath) => {
try {
return await import(modulePath)
} catch (e) {
console.warn("No occt-import-js found. STEP files will not be supported");
}
}
loadModule('occt-import-js');

TypeError:null is not an object(evaluating 'RNFSManager.RNFSFileTypeRegular')

I am currently working on reading a local file in react-native and am running into the following error,
TypeError:null is not an object(evaluating 'RNFSManager.RNFSFileTypeRegular')
The code I am using is taken straight off of the documentation for react-native-fs , using the basic example, from the examples section:
// require the module
var RNFS = require('react-native-fs');
// get a list of files and directories in the main bundle
RNFS.readDir(RNFS.MainBundlePath) // On Android, use "RNFS.DocumentDirectoryPath" (MainBundlePath is not defined)
.then((result) => {
console.log('GOT RESULT', result);
// stat the first file
return Promise.all([RNFS.stat(result[0].path), result[0].path]);
})
.then((statResult) => {
if (statResult[0].isFile()) {
// if we have a file, read it
return RNFS.readFile(statResult[1], 'utf8');
}
return 'no file';
})
.then((contents) => {
// log the file contents
console.log(contents);
})
.catch((err) => {
console.log(err.message, err.code);
});
If it helps I am using vs when writing this on a Windows 10 computer.
I have tried resetting my cache, reinstalling react-native-fs, and linking react-native-fs, none have solved the problem all resulting in the same error.
I would greatly appreciate any help. Thank you.
In case of iOS message is 'Native module cannot be null', In Android message is 'null is not an object evaluating RNFSManager etc'
Solution for iOS is run pod install in iOS Directory, then react-native run-ios to re-run the app.
Solution for android is react-native link react-native-fs then react-native run-android to re-run the app.

React Native module not working only on iOS

I have recently upgraded my react-native project to 0.60. After upgrading, a native module I have been working with has stopped working on iOS, with the error TypeError: Cannot read property 'show' of undefined.
I have been modifying this native module but the only code I had modified after upgrading to RN 0.60 was Android code. My modified module code is at https://github.com/BradyShober/react-native-braintree-dropin-ui
The file that is calling the module is
import BraintreeDropIn from 'react-native-braintree-dropin-ui';
const showBraintreeUI = async (token, amount) => {
BraintreeDropIn.show({
clientToken: token,
countryCode: 'US',
currencyCode: 'USD',
orderTotal: amount,
googlePay: true,
googleMerchantId: 'merchantID',
applePay: true,
merchantName: "Name",
merchantIdentifier: "ID",
vaultManager: true
})
.then(async (result) => {
console.log(result)
}
catch(error){
console.log(error);
}
})
.catch((error) => {
if (error.code === 'USER_CANCELLATION') {
console.log("User cancelled payment");
}
else {
console.log(error);
}
});
}
export { getBraintreeToken, showBraintreeUI };
The expected result is the opening of the Braintree Drop In UI which works on Android but on iOS is throwing an error TypeError: Cannot read property 'show' of undefined.
I believe this to be an issue with autolinking, I have been able to get it to work if I right click Libraries in Xcode, then Add files and select the module's .xcodeproject and then add the library in Link Binaries with Libraries. I haven't been able to easily find what I would have to change in the module to not have to do those steps as a workaround.
I was able to get it working thanks to some help I got on the Reactiflux discord server. The issue was due to an issue in the module's Podspec that was causing none of the module's source files to be detected. The s.source_files was set to s.source_files = "RNBraintreeDropIn/**/*.{h,m}" instead of s.source_files = "*.{h,m}"

Unable to include AB Testing for React Native application

I am integrating A/B Testing for my React Native application using Firebase. I have tried two methods - using react-native-ab and react-native-ab-test.
In the first case, I get an error saying "undefined is not an object(evaluating PropTypes.string)"
In the second case, I get an error saying "index.ios.js tries to require 'react-native' but there are several files providing this module. You can delete or fix them."
In both the cases, I get these errors just by importing the dependency in my JS file. By seeing the github pages of both dependencies, I think there is no need to link both the dependencies and they run fine.
Links :
https://github.com/lwansbrough/react-native-ab
https://github.com/landaio/react-native-ab-test
I installed it with this module and it works perfectly, you can try this:
https://github.com/invertase/react-native-firebase
https://rnfirebase.io/docs/v5.x.x/getting-started
and then it is to configure the remote config so that the a-b test works for you
https://rnfirebase.io/docs/v5.x.x/config/reference/config
I'm using A/B testing and works for me with this module:
"react-native-firebase": "3.3.1",
and needs pod too.
pod 'Firebase/Core', '~> 5.11.0'
pod 'Firebase/RemoteConfig', '~> 5.11.0'
My logic
import firebase from 'react-native-firebase';
setRemoteConfigDefaults() {
if (__DEV__) {
firebase.config().enableDeveloperMode();
}
// Set default values
firebase.config().setDefaults({
my_variant_remote_config_param: ''
});
}
/**
* FIREBASE remote config fetch
* #param valueToFetch: remote config key
*/
export const fetchRemoteConfig = async (valueToFetch: RemoteConfigKeysTypes): Promise<string> => {
try {
await firebase.config().fetch();
await firebase.config().activateFetched();
const snapshot = await firebase.config().getValue(valueToFetch);
const response = snapshot.val();
return response;
} catch (error) {
firebase.analytics().logEvent('remote_config_get_value_error', { error, key: valueToFetch });
return null;
}
};
More Info:
https://www.npmjs.com/package/react-native-firebase

React-Native: TypeError: undefined is not an object

N.B. First time posting, so please don't hesitate to correct formatting errors, question form, etc.
I'm relatively new to react-native and but trying to build an app that makes changes to a google sheet using their API. I found a package to handle the OAuth authentication (repo-linked-here) but it seems to be throwing the following error:
TypeError: undefined is not an object (evaluating 'Module[fn]')
Here is most of my index.android.js:
...
import OAuthManager from 'react-native-oauth';
const manager = new OAuthManager('App');
export default class App extends Component {
constructor(props){
super(props);
this.state = {
isSignedIn: false
};
}
componentDidMount(){
manager.configure({
google: {
callback_url: 'http://localhost/google',
client_id: '*************',
client_secret: '************'
}
})
.then(resp => console.warn(resp))
.catch(err => console.warn(err));
}
...
React-native-oauth seems to indicate that if I use 'http://localhost/google' for the callback and add a few lines to the build.gradle file, then the callbacks/linking should work fine.
Any and all advice would be appreciated!
I think your are not calling authorize from manager. Also you can't add then & catch to configure:
componentDidMount(){
manager.configure({
google: {
callback_url: 'http://localhost/google',
client_id: '*************',
client_secret: '************'
}
});
manager.authorize('google', {scopes: 'profile email'})
.then(resp => console.warn(resp))
.catch(err => console.warn(err));
}
Maybe someone else had this problem .
I also had this error message and spend a lot of time to find any solution , and none of founded answers resolved my issue .
The problem was neither configure or authorise .
When you run (cd ios && pod install) and try to link it's asking you to overwrite pods file . Say YES .
I found it by running app from xcode , then get error message like :
framework not found DCTAuth
Then googling and found that it is related with pods file .
Hope this will help someone .