"error: node_modules\expo\AppEntry.js: Unexpected token 'export'"

Issue

I'm having a problem with my Expo project.
When trying to run my app with yarn start, I'm facing this error:

Android Bundling failed 449ms
error: node_modules\expo\AppEntry.js: Unexpected token 'export'

Here is my App.js:

import React, { useState, useEffect } from "react";
import "react-native-gesture-handler";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { NavigationContainer, DefaultTheme } from "@react-navigation/native";
import { onAuthStateChanged } from "firebase/auth";
import { auth } from "./config/firebaseConfig";
import { IntroductionAnimationScreen } from "./introduction_animation";
// screens
import {
  PlantDetail,
  Welcome,
  Signup,
  Login,
  Profile,
  ChatBot,
  Settings,
  ExpertHome,
  CourseList,
  Cources,
} from "./screens";
// Tab Navigator
import Tabs from "./navigation/tabs";
// Font
import { useFonts } from "expo-font";

const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    border: "transparent",
  },
};

const Stack = createNativeStackNavigator();
const App = () => {
  const [user, setUser] = useState(null);
  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (authUser) => {
      if (authUser) {
        // User is signed in
        setUser(authUser);
      } else {
        // User is signed out
        setUser(null);
      }
    });

    // Unsubscribe from the listener when the component unmounts
    return () => {
      unsubscribe();
    };
  }, []);

  const [loaded] = useFonts({
    "Roboto-Light": require("./assets/fonts/Roboto-Light.ttf"),
    "Roboto-Black": require("./assets/fonts/Roboto-Black.ttf"),
    "Roboto-Bold": require("./assets/fonts/Roboto-Bold.ttf"),
    "Roboto-Regular": require("./assets/fonts/Roboto-Regular.ttf"),
  });

  if (!loaded) {
    return null;
  }

  return (
    <NavigationContainer theme={theme}>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}
        initialRouteName={user ? "HomeTabs" : "Welcome"}
      >
        {/* Tabs */}
        {user ? (
          <>
            <Stack.Screen name="HomeTabs" component={Tabs} />
            <Stack.Screen
              name="Profile"
              component={Profile}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="ChatBot"
              component={ChatBot}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="ExpertHome"
              component={ExpertHome}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="CourseList"
              component={CourseList}
              options={{ headerShown: false }}
            />

            <Stack.Screen
              name="Cources"
              component={Cources}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="IntroductionAnimationScreen"
              component={IntroductionAnimationScreen}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="Settings"
              options={{
                headerShown: false,
                cardStyleInterpolator: ({ current, next, layouts }) => {
                  return {
                    cardStyle: {
                      transform: [
                        {
                          translateX: current.progress.interpolate({
                            inputRange: [0, 1],
                            outputRange: [layouts.screen.width, 0],
                          }),
                        },
                      ],
                    },
                    overlayStyle: {
                      opacity: current.progress.interpolate({
                        inputRange: [0, 1],
                        outputRange: [0, 0.5],
                      }),
                    },
                  };
                },
              }}
              component={Settings}
            />
          </>
        ) : (
          <>
            {/* Screens */}
            <Stack.Screen
              name="Welcome"
              component={Welcome}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="Signup"
              component={Signup}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="Login"
              component={Login}
              options={{ headerShown: false }}
            />
          </>
        )}
        <Stack.Screen
          name="PlantDetail"
          component={PlantDetail}
          options={{ headerShown: false }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

Here are all my dependencies:

  "dependencies": {
    "@expo/vector-icons": "^13.0.0",
    "@expo/webpack-config": "^19.0.0",
    "@google-ai/generativelanguage": "^1.1.0",
    "@react-native-async-storage/async-storage": "1.18.2",
    "@react-navigation/bottom-tabs": "^6.5.8",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/native-stack": "^6.9.13",
    "axios": "^1.5.0",
    "deprecated-react-native-prop-types": "^4.2.1",
    "dotenv": "^16.3.1",
    "expo": "~49.0.5",
    "expo-constants": "~14.4.2",
    "expo-font": "~11.4.0",
    "expo-image-picker": "~14.3.2",
    "expo-linear-gradient": "~12.3.0",
    "expo-status-bar": "~1.6.0",
    "firebase": "^10.3.1",
    "lodash": "^4.17.21",
    "nativewind": "^2.0.11",
    "postcss": "8.4.23",
    "prop-types": "*",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.5",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-gifted-chat": "^2.4.0",
    "react-native-heroicons": "^3.2.0",
    "react-native-modalize": "^2.1.1",
    "react-native-onboarding-swiper": "^1.2.0",
    "react-native-pager-view": "6.2.0",
    "react-native-progress": "^5.0.0",
    "react-native-progress-circle": "^2.1.0",
    "react-native-reanimated": "^3.5.4",
    "react-native-responsive-screen": "^1.4.2",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-splash-screen": "^3.3.0",
    "react-native-svg": "13.9.0",
    "react-native-tab-view": "^3.5.2",
    "react-native-vector-icons": "^10.0.0",
    "react-native-web": "~0.19.6"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "tailwindcss": "3.3.2",
    "typescript": "^5.1.3"
  },

And Here is the AppEntry.js file (if needed):

import registerRootComponent from 'expo/build/launch/registerRootComponent';

import App from '../../App';

registerRootComponent(App);

I've tried doing the following:

1. Deleting the node_modules and reinstalling it with yarn (or npm install).
2. Checking all the dependencies that have any issues in terms of import/export.
3. Checking the syntax for each and every screen that I'm importing into App.js
   (especially how I export them).

Solution

Thank you everyone for taking your precious times for this problem. But I've solved this problem. Here are the things I did:

Okay, So because I was using TS with JS and that's why the error occurred between Common JS & ES modules. To remove this :

1. I changed the babel.config.js into this:

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

2. Then I deleted my node_modules and package.json (please make a copy before deleting it) files. And I reinstalled all the dependencies one by one using yarn. This error was occurring because of the conflict on export in any of my dependencies. So, after I reinstalled them one by one, the error was resolved automatically.

Here is why I think that it happened because of error in export of any of my dependencies:

I went to AppEntry.js and I found that import App from '../../App'; in this line, AppEntry was unable to find the App.js file. So, then I checked the App.js thoroughly. And I found that there was nothing unnatural inside the return(). So, the error must be present in any of the dependencies that I've used in this project.

Another thing, try using yarn rather using npm. Yarn installs the dependencies as per their required versions.

Answered By - Snehasish Konger