Failure To Create Link [Cannot read property 'create' of null]

[haggard-labs]

The problem

I just recently upgraded to 11.6.0 and transitioned to the new procedure (using create and open instead of PlaidLink). However, even after following the examples, I'm running into this error: Cannot read property 'create' of null.

I have verified that my link token is being properly created and exists before passing it to the createLinkTokenConfiguration function.

There's a good chance this is a silly mistake on my end, as it has been a few months since I've touched any React Native, but I've read all of the documentation on the upgrade and cannot find any solutions.

Any help would be appreciated!

Environment

Plaid Link React Native	11.6.0
ReactNative Version	0.73.6
Expo Version	50.0.14
Occurs on iOS	yes
iOS Version	17.5
iOS Devices/Emulators	iPhone 15 Pro Max

Screenshots

Logs

In the following, "creating" indicates the create function was called and "false" indicates the link_token was not null.

creating
false

TypeError: Cannot read property 'create' of null, js engine: hermes
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:105:15 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:150:4 in handleException
- ... 7 more stack frames from framework internals

Code To Reproduce Issue

This is located in a large React Native app, so I'm not sure if this code works standstill, but here are the excepts.

// assume necessary imports
import {
  LinkExit,
  LinkSuccess,
  PlaidLink,
  LinkLogLevel,
  LinkTokenConfiguration,
  LinkOpenProps,
  dismissLink
} from "react-native-plaid-link-sdk";
import { create, open } from "react-native-plaid-link-sdk/dist/PlaidLink";

export default function IntInv({ styles, setVisible, initIndex }: IntInvProps) {
  // other code setting up non-Plaid related variables

  // creates a link token for plaid usage
  const [linkToken, setLinkToken] = useState(null);
  const createLinkToken = useCallback(async () => {
    // API call to get link_token

    const linkToken = (response.data as { link_token: string }).link_token;
    setLinkToken(linkToken);

    console.log(linkToken);
  }, [setLinkToken]);

  function createLinkTokenConfiguration(
    token: string,
    noLoadingState: boolean = false,
  ): LinkTokenConfiguration {
    console.log(token === null)
    return {
      token: token,
      noLoadingState: noLoadingState,
    };
  }

  function createLinkOpenProps(): LinkOpenProps {
    return {
      onSuccess: (async (success: LinkSuccess) => {
        console.log("success!")

        // code handling data
        // note: doesn't even reach this point
      }),
      onExit: (linkExit: LinkExit) => {
        // code handling exit
        // note: doesn't reach this point
        dismissLink()
      },
      logLevel: LinkLogLevel.ERROR,
    };
  }

  const openLink = () => {
    console.log("creating")
    create(createLinkTokenConfiguration(linkToken, false));
    console.log("opening")
    open(createLinkOpenProps());
  }

  useEffect(() => {
    if (linkToken === null) {
      createLinkToken();
    }
  }, [linkToken]);

  return (
    <View style={[{ marginTop: "5%" }, flexbox.column, flexbox.justifyEvenly]}>
        <View style={[flexbox.row, flexbox.justifyEvenly, { marginTop: "5%" }]}>
            <View
              style={[
                flexbox.row,
                flexbox.justifyBetween,
                flexbox.alignCenter,
                {
                  alignSelf: "center",
                  backgroundColor: strLightGreen(),
                  paddingHorizontal: "10%",
                  borderRadius: 30,
                  paddingVertical: "5%",
                },
              ]}
            >
              <MaterialCommunityIcons
                name="layers-plus"
                size={20}
                color={strOffBlack()}
              />
              <Pressable onPress={openLink}>
                <Text
                  style={[
                    colors.offBlack,
                    font.fontNormal,
                    font.sizeSmallXL,
                    { paddingLeft: "10%" },
                  ]}
                >
                  Add Account
                </Text>
              </Pressable>
            </View>
        </View>
    </View>
  );
}

If there is anything else I can provide please let me know!

[dtroupe-plaid]

Hi @haggard-labs

Thanks for reporting.

You added Expo Version 50.0.14 to your issue post. This means you are using Expo?

Note - our SDK does not support Expo. This is likely the root cause of your issue.

[haggard-labs]

Hi there,

Okay, interesting. I've never had any problems with it before. All previous versions of the SDK have worked flawlessly with Expo.

Do you have any suggestions for a work-around?

Edit: You are correct! Opened the App w/o using ExpoGO and Plaid starts up with no issues. Strange it worked before - thank you!

[xamartin7]

Good afternoon, I have the same issue. Is there work being done to make it work with expo? Or I have to work with react native CLI?

Thanks and regards!