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:
node_modules and reinstalling it with yarn (or npm install).import/export.App.js 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 :
module.exports = function async (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ["nativewind/babel", "react-native-reanimated/plugin"],
};
};
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 thereturn(). 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.