I am attempting to do a simple POST request to my backend from within the <PlaidLink />
component onSuccess prop. However, with fetch, I get a strange warning that says:
Require cycle: node_modules/react-native-plaid-link-sdk/node_modules/react-native/Libraries/Network/fetch.js -> node_modules/react-native-plaid-link-sdk/node_modules/react-native/Libraries/Network/fetch.js
And I also get an error that says:
TypeError: undefined is not a function (near '...fetch...')
How is this possible? fetch is clearly a function as it's part of the react native API. I only get this error when I try to use fetch within the onSuccess prop. fetch works just fine elsewhere throughout my app.
I also tried using axios since I thought there might be some weird import/name conflict stuff going on inside the library. But axios won't even put out an HTTP request. It does nothing. Again, axios works just fine elsewhere in my code base, it is only inside onSuccess that I am having problems. How do I fix this? Below is my component and code.
const PlaidComponent = (props) => {
return (
<PlaidLink
tokenConfig={{
token: props.token,
}}
onSuccess={(success) => {
fetch(API_URL + '/plaidPermanentToken', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
value: success.publicToken,
}),
})
.then((response) => {
console.log('Token exchange complete');
console.log(response);
})
}}>
<View style={styles.button}>
<Text style={styles.textStyle}>Add Account</Text>
</View>
</PlaidLink>
);
};
After much troubleshooting, I discovered the problem was related to using YARN as my dependency management tool.
I switched over to NPM, and now the Plaid SDK works perfectly.
To do this, delete the "node_modules" folder and the "yarn.lock" file from your project root directory. DO NOT TOUCH "package.json". Run npm install
from terminal in your root directory. Now, the application should perform as expected, without any warnings about require cycles.