Uh oh: encountered an unexpected token 'export' in node_modules\expo\AppEntry.js

I'm encountering a challenge with my Expo project.
While attempting to launch my app using yarn start, I'm running into this error:

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

This 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;

These 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's the AppEntry.js file (if required):

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

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

registerRootComponent(App);

I've attempted the following troubleshooting steps:

  1. Removing the node_modules directory and reinstalling it using yarn (or npm install).
  2. Reviewing all the dependencies that have any import/export issues.
  3. Checking the syntax of each screen imported into App.js
    (especially how they are exported).
javascriptreact-nativeexpobabeljsnode-modules

Answer №1

Appreciation to all who dedicated their time to help with this issue. I managed to solve it by following these steps:

Initially, the error arose due to using TypeScript with JavaScript which caused conflicts between CommonJS and ES modules. To resolve this:

  1. I made adjustments to my babel.config.js file as shown below:
module.exports = function async (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ["nativewind/babel", "react-native-reanimated/plugin"],
  };
};
  1. Next, I deleted both node_modules and package.json files (don't forget to make a backup copy) and reinstalled each dependency individually using yarn.

It seems that the root cause was an export error within one of the dependencies:

Upon inspecting AppEntry.js, I noticed import App from '../../App';. However, AppEntry couldn't locate App.js. After careful examination, I found no issues within the return() statement in App.js. This led me to believe that the problem lied within one of the project's dependencies.

Additionally, I recommend utilizing yarn over npm for installing dependencies since yarn handles version requirements more efficiently.

Answer №2

  1. Yesterday, I encountered a similar error that said:
An issue occurred during Android Bundling
error: node_modules\expo\AppEntry.js: Encountered an unexpected token ']'

Upon investigating further, it was revealed that there was a syntax mistake in my babel.config.js.

  1. To resolve this, you could consider starting a fresh project by following the steps below:
      
    npx create-expo-app name-of-the-new-app

    and then gradually transferring your code files to the new project, one at a time.

Answer №3

To resolve the issue, I sought guidance from the documentation available at . After making adjustments to my jest.config.js as shown below, the problem was successfully resolved. If you encounter any errors related to module imports, simply include them in the "transformIgnorePatterns" field:

module.exports = {
  preset: 'jest-expo',
  "transformIgnorePatterns": [
    "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg|@rneui/base)"
  ]
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript's Array.map function failing to return a value

Here is a snippet of code from an api endpoint in nextJS that retrieves the corresponding authors for a given array of posts. Each post in the array contains an "authorId" key. The initial approach did not yield the expected results: const users = posts.ma ...

javascripttypescriptprisma

Building a simple messaging platform with the power of Socket.io and Node.js

After following the guide at http://socket.io/get-started/chat/, I attempted to create a basic chat application. However, upon running npm install --save socket.io I encountered the error message below. How can I resolve this issue? npm WARN package.jso ...

javascriptnode.jssocket.io

Assign an AJAX call to retrieve data from a MySQL table and store it in a

In my database, I have a table that includes fields for 'user_name' and 'user_round'. My goal is to set the 'user_round' field to match the value of a JavaScript variable called 'Level'. However, when I run my code, ...

javascriptjquerymysqlajax

Using Express for Managing Subdomains, Redirects, and Hosting Static Files

I am struggling to configure Express in a specific way and can't seem to get it right. Despite researching on various platforms like SO, I still can't figure it out. Hopefully, by explaining my intentions here, someone can guide me in the right d ...

javascriptnode.jsexpress

After making an AJAX call, the table data can be found in page 1 under the tbody

Can anyone help me with this issue? I've gone through all the guides related to this problem and followed them step by step, but still no success. After populating the table using an AJAX call, all the data appears on a single page only. I attempted ...

javascriptphpjqueryajax

What is causing the CSS transition to fail in the updated DOM?

When attempting to apply a CSS transition as shown in the following code snippet: https://jsfiddle.net/sunyuu/e58sfeva/17/ var Main = { data () { return { isActive: false, childStyle: {} }; }, methods: { sho ...

javascripthtmlcssvue.js

Tips and tricks for retaining the collapsed state upon reloading Bootstrap 5

Just diving into the world of bootstrap and javascript. How do I save the collapsed state to make sure it stays even after refreshing the page? <p> <button class="btn btn-primary" type="button" data-bs-toggle="collapse&q ...

javascriptbootstrap-5

Utilize the MaterialUI DataGrid to showcase nested object values in a visually appealing

Hey there, fellow coders! I'm currently working on fetching data from an API and displaying it in a data grid using React.js. Here's the format of the data I'm receiving from the API: {data: Array(200)} data : (200) [{…}, {…}, {…}, { ...

javascriptreactjsmaterial-ui

Retrieving values of checked boxes in a table using JavaScript

While using the select method, I had this line of code: Person_name = $('#selectedPerson').val() When selecting 2 values, person_name.length displays as 2. Recently, I switched to checkboxes displayed in a table. However, when I use person_name ...

javascript

Organize data by multiple criteria using List.js

Attempting to configure the list.js plugin to allow sorting based on multiple values. Specifically, the goal is to sort by category first and then alphabetically by title within each category. See a demo here: http://jsfiddle.net/8E7cH/ This functional ...

javascriptjquerylistgoogle-chromesorting

Utilize SCSS values within TypeScript by applying them on a class level

let changeClassDisplay = document.getElementsByClassName('sidebar'); for (var i = 0; i < changeClassDisplay.length; i += 1) { changeClassDisplay[i].style.display = 'block'; } I encountered an issue with this code whe ...

javascripthtmlcsstypescriptsass

Could a personalized "exit page" confirmation be created?

I am looking for a solution that will allow me to pause the execution of my code, display a dialog box, and then resume execution only after a specific button is pressed. For example, if a user navigates from one page to another on my website, I want a di ...

javascriptangularjs

When an Ajax post request is made, the data being sent is appended to the JSON response

Having a dilemma with my ajax call: $.ajax({ url: '/assets/functions.php', type: 'POST', data: { "functionCall": "get-uploads", "type": type }, dataType: 'json', success: function (data ...

javascriptphparraysjsonajax

What are some creative ways to customize and animate the cursor or caret within an input field?

Just to clarify, I am working with React and Material-UI. I have a task at hand where I need to modify the appearance of the caret within an input element by adding an animation to it. I have managed to change its color using caret-color and set a default ...

javascripthtmlcsssassmaterial-ui

What is the best way to convert a string to an integer in JavaScript while still maintaining compatibility with Internet Explorer 11?

Here is the code snippet that I am working with: setCol (param) { // missing forEach on NodeList for IE11 if (window.NodeList && !NodeList.prototype.forEach) { NodeList.prototype.forEach = Array.prototype.forEach; } const a ...

javascriptjqueryvue.jsinternet-explorerparseint

Javascript animation functioning for a singular item within a list

As I continue practicing my skills in Javascript and HTML, I stumbled upon this intriguing list known as "item/adapter", similar to what we refer to as adapters in Android. While the process of adding them programmatically to my div is working smoothly, I& ...

javascriptjqueryhtmlajax

jquery mobile listview extension not functioning as expected

My JQM menu is displayed as a listview, and I want it to be normal on every page except one where it should have 2 extra items. Despite searching online for solutions, nothing seems to work. Here are some of the things I've attempted: -location.reloa ...

javascriptandroidjquerylistviewjquery-mobile

What is the best way to retrieve a value from a JSON object using AngularJS?

Using nodeJS, the server sends a JSON object to the controller: data = { "question": "theQuestion", "answer": "theAnswer" }; res.json(data); In the controller, I attempt to manipulate the variable as follows: data = QA.get(); $scope.q = data[que ...

javascriptjsonangularjsnode.js

"Exploring the capabilities of React Native with an Https Agent

Can the HTTPS Agent be used in a React Native app? This is my current code: import axios from 'axios'; import ip from './ip'; import https from 'https'; const httpsAgent = new https.Agent({rejectUnauthorized: false}); con ...

reactjsreact-nativehttpsaxios

I am interested in retrieving a variable from a function

this is some unique HTML code <form id="upload"> <label for="file">Choose a File to Upload</label> <input type="file" id="file" accept=".json"> <butto ...

javascripthtmljsonfile-uploadleaflet