Crash on startup: TypeError: Super expression must either be null or a function

[aphexcx]

What React Native libraries do you use?

Expo Application Services (EAS), Expo Router, RN New Architecture

Are you using sentry.io or on-premise?

sentry.io (SaS)

@sentry/react-native SDK Version

6.3.0, 6.9.1

How does your development environment look like?

My package.json:

 "expo": "^52.0.38",
    "expo-application": "~6.0.2",
    "expo-audio": "^0.3.5",
    "expo-auth-session": "^6.0.3",
    "expo-blur": "~14.0.3",
    "expo-build-properties": "^0.13.2",
    "expo-constants": "~17.0.8",
    "expo-dev-client": "~5.0.14",
    "expo-device": "~7.0.2",
    "expo-font": "~13.0.4",
    "expo-haptics": "~14.0.1",
    "expo-image": "~2.0.6",
    "expo-image-picker": "^16.0.5",
    "expo-linking": "~7.0.5",
    "expo-notifications": "~0.29.14",
    "expo-router": "~4.0.18",
    "expo-secure-store": "^14.0.1",
    "expo-sensors": "~14.0.0",
    "expo-splash-screen": "~0.29.22",
    "expo-status-bar": "~2.0.1",
    "expo-symbols": "~0.2.2",
    "expo-system-ui": "~4.0.7",
    "expo-task-manager": "~12.0.5",
    "expo-updates": "~0.27.3",
    "expo-web-browser": "^14.0.2",

My app.config.ts looks like:

import { withSentry } from '@sentry/react-native/expo';

// Create the base configuration function that generates the ExpoConfig object
const createConfig = ({ config }: ConfigContext): ExpoConfig => {
  
...

// Export the config wrapped with Sentry
export default (ctx: ConfigContext) => {
  return withSentry(createConfig(ctx), {
    url: 'https://sentry.io/',
    project: 'wave-mobile',
    organization: 'fairbrook-ai',
  });
};

And I've also tried having this in my plugins and got the same error:

    plugins: [
      'expo-router',
....
      ['@sentry/react-native/expo', {
        url: 'https://sentry.io/',
        project: 'wave-mobile',
        organization: 'fairbrook-ai',
      }],

Sentry.init()

Sentry.init({
dsn: 'https://54c95aeb6fa30de7ea6c35998d2e0e10@o4508792920408064.ingest.us.sentry.io/4509012060536832',
// Enable Spotlight in development
spotlight: DEV,
// Set tracesSampleRate to 1.0 to capture 100% of transactions for tracing
tracesSampleRate: 1.0,
});

Steps to Reproduce

Built my expo app with expo run:ios --device

My invite.tsx file has

import * as Sentry from '@sentry/react-native';

...
<View style={styles.buttonContainer}>
          <Button title='Try!' onPress={ () => { Sentry.captureException(new Error('First error')) }}/>
          ...
...

Expected Result

I should be able to see that button and press it to generate a test error to sentry

Actual Result

console.js:614 TypeError: Super expression must either be null or a function Error Component Stack:
    at ContextNavigator (ExpoRoot.js:73:36)
    at ExpoRoot (ExpoRoot.js:47:76)
    at App (<anonymous>)
    at ErrorToastContainer (ErrorToastContainer.tsx:4:11)
    at ErrorOverlay (<anonymous>)
    at withDevTools(ErrorOverlay) (withDevTools.ios.tsx:27:25)
    at RCTView (<anonymous>)
    at View (View.js:32:34)
    at RCTView (<anonymous>)
    at View (View.js:32:34)
    at AppContainer (AppContainer-dev.js:87:11)
    at main(RootComponent) (getCachedComponentWithDebugName.js:26:42)

[krystofwoldrich]

Hi @aphexcx,
thank you for the message, sadly the Component Stack doesn't show any Sentry component,

can you share with us the Call Stack from the screenshot?

---

Does the Red Box still point to the Sentry import if you reorder the imports in the invite.tsx?