Question 265539 in React native Question posted in
The official React Native documentation can be found here.

React native – "error: node_modulesexpoAppEntry.js: Unexpected token 'export'"

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_modulesexpoAppEntry.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).
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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"],
  };
};
    1. 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.


  2. 0
    1. When I got a similar error yesterday,
    Android Bundling failed
error: node_modulesexpoAppEntry.js: Unexpected token ']'

    error: node_modulesexpoAppEntry.js: Unexpected token.

        it turned out I had a syntax error in babel.config.js.

    1. Another approach would be to start a completely new project,
        npx create-expo-app name-of-the-new-app
      and then move your code files over to the new project, one by one.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search