I am working on my first app in React Native and am using the android emulator. When I run npx expo start and run the code, I am getting this error (See attached image). I am running the latest version of nodejs. (v2.2.0) and the latest version of Tailwindcss. This renders the same in the emulator and on my actual device.

Image showing syntax error in android emulator

I’ve installed the latest versions of Expo, Node, etc., and I am still getting this error. I am expecting to see a main screen with white background with centered text saying, “Welcome to Ready, Set, Fly!”

See codes below:

     // tailwind.config.js

    module.exports = {
          content: [
            "./App.{js,jsx,ts,tsx}", "./<custom directory>/**/*.{js,jsx,ts,tsx}",
            "./App.{js,jsx,", "./screens/**/*.{js,jsx,ts,tsx}",
            "./pages/**/*.{js, ts, jsx, tsx}",
            "./components/**/*.{js, ts, jsx, tsx}",
          ],
          theme: {
          extend: {},
          },
          plugins: [],
       }

    // package.json
    {
      "dependencies": {
        "@react-navigation/native": "^6.1.17",
        "@react-navigation/native-stack": "^6.9.26",
        "expo": "^51.0.0-canary-20240418-8d74597",
        "expo-camera": "0.0.1-canary-20240418-8d74597",
        "expo-constants": "0.0.1-canary-20240418-8d74597",
        "expo-contacts": "0.0.1-canary-20240418-8d74597",
        "expo-sensors": "0.0.1-canary-20240418-8d74597",
        "install": "^0.13.0",
        "nativewind": "^2.0.11",
        "npx": "^3.0.0",
        "react-native-safe-area-context": "4.10.0-rc.1",
        "react-native-screens": "~3.31.0-rc.1",
        "tailwindcss-react-native": "1.7.10"
      },
      "devDependencies": {
        "@tailwindcss/forms": "^0.5.7",
        "autoprefixer": "^10.4.19",
        "postcss": "^8.4.38",
        "tailwindcss": "^3.4.4"
      }
    }


    // babel.config.js

        module.exports = function(api) {
      api.cache(true);
      return {
        presets: ['babel-preset-expo'],
        plugins: ['tailwindcss-react-native/babel'],
        plugins: ["nativewind/babel"],
      }
    };

    // App.js

    import { StatusBar } from 'expo-status-bar';
    import React from 'react';
    import { Text, View } from 'react-native';
    import { TailWindProvider } from 'tailwindcss-react-native';
    import { NavigationContainer } from '@react-navigation/native';
    import { createNativeStackNavigator } from '@react-navigation/native-stack';
    import HomeScreen from './Screens/HomeScreen';
    import { NativeWindStyleSheet } from "nativewind";

    NativeWindStyleSheet.setOutput({
      default: "native",
    });

    const Stack = createNativeStackNavigator();

    function MyAppsProviders({ children }) {
      return <TailWindProvider>{children}</TailWindProvider>;
      }
 
    export default function App() {
      return (
        <NavigationContainer>
         <TailWindProvider>
          <Stack.Navigator>
          <Stack.Screen name="Home" component={HomeScreen} />
          </Stack.Navigator>
         </TailWindProvider>
        </NavigationContainer>
      );
    }