CODEWITHSUNDEEP
javascriptreactjsasynchronousreact-nativeimport
Axel Kennedal
Axel Kennedal

Reputation: 555

Async JS function is undefined when importing into React Native Component

I want to create a JavaScript file with some utility functions to import into some React Native components. I've created a file "PremiumStatus.js" with a few functions in it:

import * as InAppPurchase from 'react-native-iap';
import { AsyncStorage } from "react-native";

async function getPreviousPurchases() {
    let purchases;
    try {
        purchases = await InAppPurchase.getPurchaseHistory();
        console.log("previous purchases: ", purchases);
    } catch (e) {
        console.warn(e);
    }
    return purchases;
}

export function doSomething() {
    console.log("doing something");
}

export async function hasPurchasedPremium() {
    console.log("calling hasPurchasedPremium");
    return true; // TODO: remove this when done testing
}

And then I use it in a React Native component like this:

import { hasPurchasedPremium, doSomething } from "../../helpers/PremiumStatus";

...
async componentDidMount() {
        doSomething();
        ...
        const hasPurchasedPremium = await hasPurchasedPremium();
        ...
}

When I run it I get the following debug output:

05-04 20:40:33.540 29070 29819 I ReactNativeJS: doing something
05-04 20:40:33.789 29070 29819 W ReactNativeJS: Possible Unhandled Promise Rejection (id: 0):
05-04 20:40:33.789 29070 29819 W ReactNativeJS: TypeError: undefined is not a function (evaluating '_hasPurchasedPremium()')
05-04 20:40:33.789 29070 29819 W ReactNativeJS: componentDidMount$@http://localhost:8081/index.delta?platform=android&dev=true&minify=false:69301:85
05-04 20:40:33.789 29070 29819 W ReactNativeJS: tryCatch@http://localhost:8081/index.delta?platform=android&dev=true&minify=false:16727:23
05-04 20:40:33.789 29070 29819 W ReactNativeJS: invoke@http://localhost:8081/index.delta?platform=android&dev=true&minify=false:16900:32
05-04 20:40:33.789 29070 29819 W ReactNativeJS: http://localhost:8081/index.delta?platform=android&dev=true&minify=false:16770:30
05-04 20:40:33.789 29070 29819 W ReactNativeJS: tryCatch@http://localhost:8081/index.delta?platform=android&dev=true&minify=false:16727:23
05-04 20:40:33.789 29070 29819 W ReactNativeJS: invoke@http://localhost:8081/index.delta?platform=android&dev=true&minify=false:16803:30
05-04 20:40:33.789 29070 29819 W ReactNativeJS: http://localhost:8081/index.delta?platform=android&dev=true&minify=false:16813:21
05-04 20:40:33.789 29070 29819 W ReactNativeJS: tryCallOne@http://localhost:8081/index.delta?platform=android&dev=true&minify=false:16056:16
05-04 20:40:33.789 29070 29819 W ReactNativeJS: http://localhost:8081/index.delta?platform=android&dev=true&minify=false:16157:27
05-04 20:40:33.789 29070 29819 W ReactNativeJS: http://localhost:8081/index.delta?platform=android&dev=true&minify=false:2884:26
05-04 20:40:33.789 29070 29819 W ReactNativeJS: _callTimer@http://localhost:8081/index.delta?platform=android&dev=true&minify=false:2773:17
05-04 20:40:33.789 29070 29819 W ReactNativeJS: _callImmediatesPass@http://localhost:8081/index.delta?platform=android&dev=true&minify=false:2809:19
05-04 20:40:33.789 29070 29819 W ReactNativeJS: callImmediates@http://localhost:8081/index.delta?platform=android&dev=true&minify=false:3028:33
05-04 20:40:33.789 29070 29819 W ReactNativeJS: __callImmediates@http://localhost:8081/index.delta?platform=android&dev=true&minify=false:2362:32
05-04 20:40:33.789 29070 29819 W ReactNativeJS: http://localhost:8081/index.delta?platform=android&dev=true&minify=false:2189:34
05-04 20:40:33.789 29070 29819 W ReactNativeJS: __guardSafe@http://localhost:8081/index.delta?platform=android&dev=true&minify=false:2346:13
05-04 20:40:33.789 29070 29819 W ReactNativeJS: flushedQueue@http://localhost:8081/index.delta?platform=android&dev=true&minify=false:2188:21
05-04 20:40:33.789 29070 29819 W ReactNativeJS: flushedQueue@[native code]
05-04 20:40:33.789 29070 29819 W ReactNativeJS: invokeCallbackAndReturnFlushedQueue@http://localhost:8081/index.delta?platform=android&dev=true&minify=false:2181:33
05-04 20:40:33.789 29070 29819 W ReactNativeJS: invokeCallbackAndReturnFlushedQueue@[native code]

With the most interesting line "TypeError: undefined is not a function (evaluating '_hasPurchasedPremium()')".

How come the async function is undefined when the regular function works just fine?

Upvotes: 0

Views: 808

Answers (2)

Axel Kennedal
Axel Kennedal

Reputation: 555

This is incredibly weird, but the error went away after I renamed the async function.

Upvotes: 0

madox2
madox2

Reputation: 51841

It seem related to babel. I am not sure how is babel set up in your react native version, but the workaround below should work:

async function hasPurchasedPremium() {
    console.log("calling hasPurchasedPremium");
    return true; // TODO: remove this when done testing
}

export { hasPurchasedPremium }

Upvotes: 2

Related Questions