https://vapi.ai/ logo
Join Discord
Powered by
React Native SDK + ERROR TypeError: Super expres...
# support
c
Hi there, I have been using Vapi RN SDK for several weeks but in the past few days, it has not functioned. It errors out on a simple new Vapi() Instance. Did something in the SDK change? I have even created a simple MRE of this.
Copy code
import { Pressable, StyleSheet, Text, View } from "react-native";
import Vapi from "@vapi-ai/react-native";
import { useEffect } from "react";

export default function HomeScreen() {
  const ASSISTANT_ID = "XXX";
  const VAPI_PUBLIC_KEY = "XXX";
  let vapi: any;

  useEffect(() => {
    vapi = new Vapi(VAPI_PUBLIC_KEY);
  }, [vapi]);

  // const handlePress = async () => {
  //   vapi.start(ASSISTANT_ID);
  // };

  return (
    <View className="flex-1 items-center justify-center bg-white">
      <Text className="text-xl">Vapi</Text>
      <Pressable
        className="bg-blue-500 p-2 mt-4 rounded-md"
        onPress={() => {
          console.log("press");
        }}
      >
        <Text className="text-white">Press me</Text>
      </Pressable>
    </View>
  );
}
v
Hi @crypblizz, I'm an AI assistant for Vapi. I'll analyze available sources and get back to you shortly.
----------------------------- **While I generate an answer, here are some sources that might be helpful**: * [Vapi Web SDK]() * [Vapi Flutter SDK]() * [Web SDK]() * [Vapi iOS SDK]() -----------------------------
### Answer The issue you're encountering might be related to recent changes or dependencies in your React Native setup. To address the 
TypeError: Super expression must either be null or a function
error, please check the following: 1. **Ensure Correct Dependencies**: Make sure you have the required dependencies and versions correctly installed. Here is an example of dependencies from a working setup:
Copy code
json
    {
      "dependencies": {
        "react": "18.2.0",
        "react-native": "0.73.6",
        "@vapi-ai/react-native": "^0.1.2"
      },
      "devDependencies": {
        "@babel/core": "^7.20.0"
      }
    }
2. **Check Your Code**: Ensure that the 
vapi
instance is being created correctly without any conditional dependency:
Copy code
javascript
    import { Pressable, StyleSheet, Text, View } from "react-native";
    import Vapi from "@vapi-ai/react-native";
    import { useEffect } from "react";

    export default function HomeScreen() {
      const ASSISTANT_ID = "XXX";
      const VAPI_PUBLIC_KEY = "XXX";
      let vapi = null;

      useEffect(() => {
        vapi = new Vapi(VAPI_PUBLIC_KEY);
      }, []);

      return (
        <View style={styles.container}>
          <Text style={styles.text}>Vapi</Text>
          <Pressable
            style={styles.button}
            onPress={() => {
              console.log("press");
            }}
          >
            <Text style={styles.buttonText}>Press me</Text>
          </Pressable>
        </View>
      );
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'white',
      },
      text: {
        fontSize: 24,
      },
      button: {
        backgroundColor: 'blue',
        padding: 16,
        marginTop: 16,
        borderRadius: 8,
      },
      buttonText: {
        color: 'white',
      }
    });
3. **Review Any Recent Changes**: If your setup was working previously, review any recent changes to your project or its dependencies. For more specific debugging, you might want to check the official [Vapi React Native SDK]() repository for any recent updates or issues.
c
this is my package.json for reference
Copy code
Also including my package.json
```{
  "name": "vapi_ai_mre",
  "version": "1.0.0",
  "main": "app/App.tsx",
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "1.23.3",
    "@react-navigation/native": "^6.1.17",
    "@react-navigation/native-stack": "^6.9.26",
    "@supabase/supabase-js": "^2.43.1",
    "expo": "~51.0.2",
    "expo-apple-authentication": "~6.4.1",
    "expo-status-bar": "~1.12.1",
    "nativewind": "^2.0.11",
    "react": "18.2.0",
    "react-native": "0.74.1",
    "react-native-elements": "^3.4.3",
    "react-native-safe-area-context": "4.10.1",
    "react-native-screens": "3.31.1",
    "react-native-url-polyfill": "^2.0.0",
    "@vapi-ai/react-native": "^0.1.7",
    "@config-plugins/react-native-webrtc": "8.0.0",
    "@daily-co/config-plugin-rn-daily-js": "0.0.4",
    "@daily-co/react-native-daily-js": "0.59.0",
    "@daily-co/react-native-webrtc": "118.0.3-daily.1",
    "react-native-background-timer": "^2.4.1",
    "react-native-get-random-values": "^1.11.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.2.45",
    "react-native-dotenv": "^3.4.11",
    "tailwindcss": "3.3.2",
    "typescript": "^5.1.3"
  },
  "private": true
}
```
v
Got it. Tagging @User for additional help.
s
For React Native SDK issue please bring up in the next Vapi Office Hour. https://discord.gg/G62apjBk?event=1237811664011661563
p
I'm a total noob, so feel free to disregard this if I'm confused, but while searching to see if EXPO SDK 51 was going to be supported, your post came up in that search. VAPI RN requires EXPO SDK 50 right now. Just mentioning this in case it's related to your bug.
s
@Porter can you ask this question on https://discord.gg/bkuyPnQB?event=1243039687740887090
a
ERROR TypeError: Super expression must either be null or a function, js engine: hermes
k
Hey Ali, can you try the following changes and let me know how it goes for you: 1. Downgrade to Expo SDK 50 2\. Using useRef instead of a regular variable ensures the Vapi instance persists between renders and prevents potential initialization issues. 3.The "Super expression" error typically occurs when there's a class inheritance issue, which is likely due to the SDK version compatibility. Some Notes: \- After Downgrade to Expo SDK 50, Run npm install or yarn install. - Clear metro bundler cache. - Rebuild your app
PreviousNext
Powered by