How can I solve a non-std C++ exception in my React Native TypeScript application with Expo compiler?

Question

I am looking to solve a recent problem of mine in a React Native TypeScript application, ran with Expo compiler.

Here is my full stack trace:

non-std C++ exception

ABI48_0_0RCTFatal
ABI48_0_0RCTConvertArrayValue
BB347F0E-F21C-3607-82E6-C8D750FDBF8C
BB347F0E-F21C-3607-82E6-C8D750FDBF8C
BB347F0E-F21C-3607-82E6-C8D750FDBF8C
_dispatch_main_queue_callback_4CF
4230C122-42E8-383B-BEEC-EE7B61F8BB61
4230C122-42E8-383B-BEEC-EE7B61F8BB61
CFRunLoopRunSpecific
GSEventRunModal
B3834960-244B-34E4-9EA0-CA4BB44EF0F3
UIApplicationMain
main
8A423F3F-B318-315E-99C7-05EE532E9C0D

Here is my index.tsx: import { registerRootComponent } from 'expo';

import App from './App';

// registerRootComponent calls AppRegistry.registerComponent('main', () => App); // It also ensures that whether you load the app in Expo Go or in a native build, // the environment is set up appropriately registerRootComponent(App);

And App.tsx:

import React, { useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import AccountInfo from './components/account/AccountInfo';
import ProjectInfo from './components/account/ProjectInfo';
import CustomerBasket from './components/account/CustomerBasket';
import Queries from './components/account/Queries';
import DeleteAccount from './components/account/DeleteAccount';
import { BrandVarietiesProps, StackParamList } from './types/types';

import Intro from './components/onboarding/Intro';
import PrivacyPolicy from './components/onboarding/PrivacyPolicy';
import ShopFront from './components/onboarding/ShopFront';
import VerifyAge from './components/onboarding/VerifyAge';

import ForgotPassword from './components/register/ForgotPassword';
import LoginScreen from './components/register/LoginScreen';
import NewPassword from './components/register/NewPassword';
import SignUp from './components/register/SignUp';
import VerifyEmail from './components/register/VerifyEmail';

import DeliveryAddress from './components/sales/DeliveryAddress';

import BrandVarieties from './components/shop/BrandVarieties';
import JuiceProductPage from './components/shop/JuiceProductPage';
import JuiceScreen from './components/shop/JuiceScreen';
import ProductPage from './components/shop/ProductPage';
import SearchProducts from './components/shop/SearchProducts';
import VapeScreen from './components/shop/VapeScreen';
import NonDisposableScreen from './components/shop/NonDisposableScreen';
import NonDisposableProductPage from './components/shop/NonDisposableProductPage';

import NotFoundScreen from './components/NotFoundScreen';

import ContinueShopping from './components/shop/ContinueShopping';

import SubSignUp from './components/subscriptions/SubSignUp';
import SubVapeScreen from './components/subscriptions/SubVapeScreen';
import ChooseFlavours from './components/subscriptions/ChooseFlavours';
import ManageSubscription from './components/subscriptions/ManageSubscription';

import ChangeAddress from './components/subscriptions/ChangeAddress';
import CancelMembership from './components/subscriptions/CancelMembership';
import CancelConfirm from './components/subscriptions/CancelConfirm';

import { View, Appearance, Text } from 'react-native';

import { lightStyles, darkStyles } from './styles.js';

interface Props {
  children: React.ReactNode;
}


class ErrorBoundary extends React.Component<Props> {
  state = {
    hasError: false,
    error: null,
  };

  static getDerivedStateFromError(error: Error) {
    return { hasError: true, error };
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    console.error('An error occurred:', error);
    console.error('Error info:', errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <View>
        <Text>Error encountered</Text>
        </View>;
    }

    return this.props.children;
  }
}

const App: React.FC = () => {
  const Stack = createStackNavigator<StackParamList>();

  const WrappedConfirmationPage: React.FC = () => (
    <View>
      {/* Placeholder content */}
    </View>
  );

  console.log("It's gucci!")
  const deviceTheme = Appearance.getColorScheme(); // 'light' or 'dark'
  const [isDarkMode, setIsDarkMode] = useState(deviceTheme === 'dark');
  const [isSubscribed, setIsSubscribed] = useState(true);

  const styles = isDarkMode ? darkStyles : lightStyles;

  return (
    <ErrorBoundary>
    <View style={{ backgroundColor: styles.background }}>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Intro">
          <Stack.Screen name="AccountInfo" component={AccountInfo} />
          <Stack.Screen name="CustomerBasket" component={CustomerBasket} />
          <Stack.Screen name="DeleteAccount" component={DeleteAccount} />
          <Stack.Screen name="ProjectInfo" component={ProjectInfo} />
          <Stack.Screen name="Queries" component={Queries} />

          <Stack.Screen name="Intro" component={Intro} />
          <Stack.Screen name="PrivacyPolicy" component={PrivacyPolicy} />
          <Stack.Screen name="ShopFront" component={ShopFront} />
          <Stack.Screen name="VerifyAge" component={VerifyAge} />

          <Stack.Screen name="ForgotPassword" component={ForgotPassword} />
          <Stack.Screen name="LoginScreen" component={LoginScreen} />
          <Stack.Screen name="NewPassword" component={NewPassword} />
          <Stack.Screen name="SignUp" component={SignUp} />
          <Stack.Screen name="VerifyEmail" component={VerifyEmail} />

          <Stack.Screen
            name="ConfirmationPage"
            component={WrappedConfirmationPage}
          />
          <Stack.Screen name="DeliveryAddress" component={DeliveryAddress} />

          <Stack.Screen name="BrandVarieties" component={BrandVarieties as any} />
          <Stack.Screen name="ContinueShopping" component={ContinueShopping} />
          <Stack.Screen name="JuiceProductPage" component={JuiceProductPage} />
          <Stack.Screen name="JuiceScreen" component={JuiceScreen} />
          <Stack.Screen name="ProductPage" component={ProductPage} />
          <Stack.Screen name="SearchProducts" component={SearchProducts as any} />
          <Stack.Screen name="VapeScreen" component={VapeScreen} />
          <Stack.Screen
            name="NonDisposableScreen"
            component={NonDisposableScreen}
          />
          <Stack.Screen
            name="NonDisposableProductPage"
            component={NonDisposableProductPage}
          />

          <Stack.Screen name="SubSignUp" component={SubSignUp} />
          <Stack.Screen name="SubVapeScreen" component={SubVapeScreen} />

          <Stack.Screen name="NotFoundScreen" component={NotFoundScreen} />
          <Stack.Screen name="ChooseFlavours" component={ChooseFlavours as any} />
          <Stack.Screen 
            name="ManageSubscription"
            component={ManageSubscription as any}
          />

          <Stack.Screen
            name="CancelMembership"
            component={CancelMembership as any}
          />
          <Stack.Screen name="ChangeAddress" component={ChangeAddress} />
          {/* <Stack.Screen name="ChangeFlavours" component={ChangeFlavours as any} /> */}
          <Stack.Screen
            name="CancelConfirm"
            component={CancelConfirm as any}

          />
        </Stack.Navigator>
      </NavigationContainer>
    </View>
    </ErrorBoundary>

 
  )
}



export default App;

I would appreciate some help. Thanks,

I tried adding error boundaries to prevent the exception but this was unsucessful

Livestock

also facing this issue since yesterday - have you found a solution? – Diocletian

I found a solution. You must render the React app in index.tsx. Hope this helps! – Livestock

Similar issue here. I'm rendering in index.tsx. The issue only appears in iOS 16.5 for me, not 16.4 – Oculist

Answer 1

Probably has to do with an outdated running metro server. Close the server and rerun.

Close metro server by closing terminal window or run.

lsof -t -i :8081 | xargs kill

Run metro server

npm run --reset-cache

Alcina

Answer 2

I'm not sure where this problem came from. I was coding normally until this issue happened. My solution is to clear the cache when you run your app.

npm run --reset-cache

I'm using

• iOS 16.5.1 (20F75)
• Expo Go v2.29.2
• react-native: 0.72.3
• expo: 49.0.3

Hope this help!

Paraesthesia

Answer 3

Deleting node_modules and doing a clean install npm ci solved it for me. None of the other solutions did.

Sicard

Answer 4

If clearing cache doesn't resolve it, another option that might help is to run expo in web mode... this way, you can see if there are any errors from the DevTools console that aren't showing up in the Expo dev tools. For example, I had a dependency cycle in my project where two modules were depending on each other - the web dev tools were able to point me to the error and this resolved the non-std C++ error I was seeing.

See https://docs.expo.dev/workflow/web/ or, after running Expo, you can hit w as well.

Really

Answer 5

I faced this error because of wrong metro config, i missed to add the config to the newConfig object as follow, after doing so make sure to clean metro cache and start over again

import {getDefaultConfig} from 'expo/metro-config';

const config = getDefaultConfig(__dirname);
const {transformer, resolver} = config;

const newConfig = {
  ...config, // forgot to add this one
  transformer: {
    ...transformer,
    babelTransformerPath: require.resolve('react-native-svg-transformer/expo')
  },
  resolver: {
    ...resolver,
    assetExts: resolver?.assetExts?.filter(ext => ext !== 'svg'),
    sourceExts: [...(resolver?.sourceExts || []), 'svg']
  }
};

module.exports = newConfig;

Hope this help someone

Lashonlashond

Answer 6

I just restarted my system after wasting 3 hours to fix this error and the issue went away.

Regalia