StripeProvider - TypeError: Cannot read property 'getConstants' of null, js engine: hermes

[Matt-Ackerman]

Describe the bug Although I have installed stripe-react-native as specified in documentation, The inclusion of results in the following error on app build: "TypeError: Cannot read property 'getConstants' of null, js engine: hermes". I'm running iOS react-native with version "@stripe/stripe-react-native": "0.28.0".

Any help is greatly appreciated, thanks.

Code

import {NavigationContainer, useNavigation} from '@react-navigation/native';
import React, {useEffect, useState} from 'react';
import EntryPage from './screens/entry-page';
import HomePage from './screens/home-page';
import ProfilePage from './screens/profile-page';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {Auth} from 'aws-amplify';
import {Button, StyleSheet, View} from 'react-native';
import {StripeProvider} from '@stripe/stripe-react-native';

const Stack = createNativeStackNavigator();

function App(): JSX.Element {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    checkAuth();
  }, []);

  // immediately check if user is logged on
  const checkAuth = async () => {
    try {
      const user = await Auth.currentAuthenticatedUser();
      setUser(user);
    } catch (error) {
      setUser(null);
    }
    setIsLoading(false);
  };

  if (isLoading) {
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#fff',
      },
    });
    return <View style={styles.container} />;
  } else {
    return (
      <StripeProvider publishableKey={'{I include my publishable key here as string'}>
        <NavigationContainer>
          <Stack.Navigator initialRouteName={user ? 'HomePage' : 'EntryPage'}>
            <Stack.Screen
              name="HomePage"
              component={HomePage}
              options={({navigation}) => ({
                headerShown: true,
                // headerStyle: {
                //   backgroundColor: 'black',
                // },
                headerTransparent: true,
                headerBlurEffect: 'systemUltraThinMaterialLight',
                headerBackVisible: false,
                headerRight: () => (
                  <Button
                    onPress={() => navigation.navigate('Profile')}
                    title="Profile"
                    color="gray"
                  />
                ),
              })}
              initialParams={{userLoggedIn: user ? true : false}}
            />
            <Stack.Screen
              name="EntryPage"
              component={EntryPage}
              options={({navigation}) => ({
                headerShown: false,
              })}
            />
            <Stack.Screen
              name="Profile"
              component={ProfilePage}
              options={({navigation}) => ({
                headerShown: false,
              })}
            />
          </Stack.Navigator>
        </NavigationContainer>
      </StripeProvider>
    );
  }
}

export default App;

[charliecruzan-stripe]

Can you say a little more about your setup? This indicates a mismatch between your JS and native code

[Matt-Ackerman]

Hi Charlie, thanks so much for the reply, I've been pretty stumped by this. I'm using typescript react-native to generate my iOS app. Not touching android for now. I've tried different versions of stripe-react-native, made sure to clear node modules and cache as well as fresh npx pod install. I feel like my issue might be similar to this stripe-react-native issue, although i'm not using expo. Here is my package.json:

{
  "name": "app",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@aws-amplify/ui-react-native": "^1.2.14",
    "@invertase/react-native-apple-authentication": "^2.2.2",
    "@react-native-async-storage/async-storage": "^1.18.1",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-community/netinfo": "^9.3.9",
    "@react-native-picker/picker": "^2.4.10",
    "@react-navigation/native": "^6.1.3",
    "@react-navigation/native-stack": "^6.9.9",
    "@react-navigation/stack": "^6.3.12",
    "@stripe/stripe-react-native": "0.28.0",
    "amazon-cognito-identity-js": "^6.2.0",
    "aws-amplify": "^5.1.3",
    "aws-amplify-react-native": "^7.0.2",
    "core-js": "^3.30.1",
    "native-base": "^3.4.25",
    "react": "18.2.0",
    "react-native": "0.71.7",
    "react-native-gesture-handler": "^2.9.0",
    "react-native-get-random-values": "^1.8.0",
    "react-native-reanimated": "^3.1.0",
    "react-native-safe-area-context": "^4.5.1",
    "react-native-screens": "^3.20.0",
    "react-native-svg": "^13.9.0",
    "react-native-svg-transformer": "^1.0.0",
    "react-native-url-polyfill": "^1.3.0",
    "react-native-vector-icons": "^9.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native-community/eslint-config": "^3.2.0",
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "^29.2.1",
    "@types/react": "^18.0.24",
    "@types/react-native-vector-icons": "^6.4.13",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.73.9",
    "prettier": "^2.4.1",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  },
  "jest": {
    "preset": "react-native"
  }
}

[charliecruzan-stripe]

that setup looks good 🤔 not sure why you'd be running into this without using Expo. For now, you could try commenting out this line and see if that unblocks you? But I'd like to understand why you're getting this error

[Matt-Ackerman]

Not sure what happened, but somewhere along the way it was resolved with "npx react-native start --reset-cache". I had run that previously, so I'm not sure what did the trick. If it comes back I'll try commenting that line you mentioned out. I appreciate the quick help!

[immersify-studio]

I am facing this same issue with same set up 🤔

Was there anything additional that you did?

I tried the following steps and your last suggestion, but am getting the same result.

rm yarn.lock rm node_modelules yarn install

cd ios rm Podfile.lock rm -rf Pods pod install

I also did a Clean Build Folder in XCode... and npx react-native start --reset-cache

but still am facing this error.

[Koruption]

Still having this issue running the latest version of stripe-react-native and expo. I've cleared cache, removed all the node modules, and lock files.

[2winter-dev]

运行最新版本的 stripe-react-native 和 expo 时仍然遇到此问题。我已清除缓存，删除所有节点模块并锁定文件。

m1 chip same issue.

[salihgun]

same issue. any suggestion?

[acabralto]

Same issue with expo

[samvoults]

I just rebuild the app and the error was gone.

eas build --profile development --platform ios

[micahcharlesbrown]

Having this issue when trying jest.requireActual('@stripe/stripe-react-native')

TypeError: Cannot read properties of undefined (reading 'getConstants')

[duykhanh0409]

I'm still facing this issue for the latest stripe is 0.37.0, thanks so much if have any suggestion ?

[Mezaje]

just build the app again using : eas build --profile development --platform ios

[duykhanh0409]

Sorry this issue for android @Mezaje Me

[emporteme]

Hello everyone Having the same problem, before everything worked well, and I added some new components, then got this error

any solutions? I think the problem is not directly connected with stripe

[AliCemilcan]

Hello I am having the same problem - I use expo but still the same.. anyone can help ?

[obedbolak]

if you are using development build just rebuild the app thats all