The metro bundler is facing an unexpected glitch and is stuck in the terminal, failing to load

Recently, I've been using explo-cli to work on a react native project. Everything was running smoothly until today when I encountered an error stating that it couldn't find module './iter-step'. Before this, there was also an issue with 'babel-runtime' not being found. To fix these problems, I simply ran 'npm install --save [missing package name]' and it seemed to resolve the issues temporarily. However, now I'm facing a new error message: "metro bundler has encountered an internal error, please check your terminal error output for more details."

[15:12:06] undefined
[15:12:06] Failed building JavaScript bundle.
Building JavaScript bundle [===============================================] 99

I never intentionally imported 'babel-runtime' or 'core-js', so it's puzzling to me why my project is complaining about their absence. Could it be possible that a vscode extension inserted them into my code without my knowledge? Has anyone else experienced this issue before?

Here is a snippet from my updated package.json file:

{
  "name": "empty-project-template",
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "babel-runtime": "^6.26.0",
    "core-js": "^2.6.3",
    "expo": "^30.0.1",
    "firebase": "^5.8.0",
    "moment": "^2.23.0",
    "number-is-nan": "^1.0.1",
    "react": "16.3.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",
    "react-native-calendars": "^1.21.0",
    "react-native-router-flux": "^4.0.6",
    "react-navigation": "^3.0.9",
    "react-redux": "^6.0.0",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "styled-components": "^4.1.3",
    "styled-icons": "^6.4.0"
  }
}

Answer №1

Following Talgat's advice, I was able to solve the issue by deleting the node_modules directory and reinstalling it using npm install.

Answer №2

To resolve the issue, it may be necessary to remove the node_modules directory and then run an npm install command. This should hopefully fix the problem.

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 Automation Script for QuickTime Screen Recording

Recently, I've been working on a JavaScript Automation script to record my screen on my Mac. However, I encountered an issue with the API when it reaches the line doc.close(). QuickTime would hang indefinitely and eventually my Script Editor would tim ...

Handling data type switching effectively for pairs in JavaScript

Imagine I have the following list: 1: Peter, 2: Mary, 3: Ken ... I am looking to create a function called switch that would return values like this: let value1 = switch("Peter") // returns 1 let value2 = switch(3) // returns "Ken" I ...

Is there a way to retrieve the Marker that is being dragged when the event handler has already been bound?

How can I identify the Marker that is being dragged when the handler is a bound function? Take a look at this snippet from my react component: constructor() { this.handleMarkerMove = this.handleMarkerMove.bind(this); } createMarker() { const marker ...

Issue: Bootstrap's JavaScript is dependent on jQuery; Browserify and Laravel Elixir are also required

Having some trouble loading bootstrap.js with browserify and Laravel elixir. I've used npm to install the necessary packages, but upon trying to load my page, I keep getting an error message that says "Error: Bootstrap's JavaScript requires jQuer ...

The list item click event is not triggered when new list items are added

I've run into a bit of confusion with my code. Everything seems to be working perfectly fine until I introduce new items. Take a look at a sample of my items However, once I make changes to my list, the click function stops working. Check out a sa ...

Exploring various endpoints using firestore Cloud Function

I am in the process of creating a versatile Cloud Function that can be executed on various endpoints. This is how my original Cloud Function looks: const functions = require('firebase-functions') const admin = require('firebase-admin' ...

Troubleshooting problems with deploying via npm surge

While attempting to deploy my web project using surge, I encountered an error that is preventing me from completing the process. This is unusual as I have successfully deployed projects in the past without any issues. email: g****n5**<a h ...

The Echart bar graph is not displaying when trying to use JSON data

Seeking assistance as a beginner in building Basic Bar inverted axes using json data. I am trying to achieve a chart similar to Bar Inverted Axes, but encountering issues with the chart not displaying properly. Utilizing Angular to develop the web applicat ...

What benefits does using Object.create(null) offer in comparison to utilizing a Map?

I've noticed that some developers prefer using code that looks like const STUFF_MAP = Object.create(null); It seems that STUFF_MAP is intended to be used like a map, hence the choice of using Object.create(null) over {} (to avoid conflicts with prope ...

Attempting to call setState (or forceUpdate) on a component that has been unmounted is not permissible in React

Hello everyone! I am facing an error message in my application after unmounting the component: Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, canc ...

Determine whether a response is not received within 8 seconds

One of the methods in my Angular component is responsible for returning data Here is a snippet of that method getRecognitionById() { this.loaderService.show(null, true); forkJoin( this.vendorWebApiService.getRecognitionById(this.executiveCh ...

What is the best way to link the :style attribute with object syntax and incorporate multiple background images?

I'm experiencing an issue trying to bind CSS style with the object syntax to an image. The style object includes the CSS property background which refers to multiple background images, but unfortunately, these images are not showing up. Template < ...

Executing JavaScript's addEventListener() function without specifying the event that triggers it

I am currently working on creating a grid of boxes that can be clicked, sending notifications with their respective IDs to the server using SocketIO. <body> <div class="wrapper"> <div id="1" class="box"></div> <div id="2 ...

transmit JSON formatted form data to an AngularJS platform

I have a webpage built on AngularJS with a login feature. I want to iframe this webpage onto my own page and automatically log in my users. Upon inspecting the AngularJS site, I noticed that the login procedure expects a json object. I have tried multipl ...

The $scope object in AngularJS has not been properly defined and

I am facing an issue with retrieving the value of email in my controller. It always returns 'undefined'. Here is my form: <form role="form" novalidate> <div class="form-group"> <input type="email" ng-model="user.emai ...

What is the significance of using a double arrow function in Javascript?

Can someone explain the double arrow notation used in the code snippet below? How does the second arrow function get executed if the first one's response is true? And in what scenarios is this notation typically used? async check({ commit }) { ...

Combining two arrays in JavaScript and saving the result as an XLS file

I have a question that I couldn't find an answer to. I need to merge two arrays and export them to an Excel file using only JavaScript/jQuery. Let's say we have two arrays: Array 1 : ["Item 1", "Item 2"] Array 2 : ["Item 3", "Item 4"] When the ...

Implementing setInterval in ReactJS to create a countdown timer

I have been working on developing a timer application using React. The functionality involves initiating a setInterval timer when a user clicks a specific button. const [timer, setTimer] = useState(1500) // 25 minutes const [start, setStart] = useState( ...

Is there a way to specify the dimensions of the canvas in my image editing software based on the user-input

Here is the code and link for my unique image editor. I would like to allow users to enter the desired width and height of the selection area. For example, if a user enters a width of 300 and height of 200, the selection size will adjust accordingly. Addit ...

Menu icon in Next.js/React/Tailwind not triggering close action when clicked again, causing responsiveness issue

Hey there, I'm relatively new to working with Next.js and React. Right now, I'm tackling the challenge of creating a responsive navbar that toggles open and closed when clicking on the hamburger icon (and should also close when clicked outside th ...