Stack Overflow
Stack Overflow

Questions tagged [metro-bundler]

Metro is a JavaScript bundler. It takes in an entry file and various options, and gives you back a single JavaScript file that includes all your code and its dependencies.

Metro is a JavaScript bundler. It takes in an entry file and various options, and gives you back a single JavaScript file that includes all your code and its dependencies.

Metro has three separate stages in its bundling process:

  • Resolution
  • Transformation
  • Serialization

Resolution

Metro needs to build a graph of all the modules that are required from the entry point. To find which file is required from another file Metro uses a resolver. In reality this stage happens in parallel with the transformation stage.

Transformation

All modules go through a transformer. A transformer is responsible for converting (transpiling) a module to a format that is understandable by the target platform (eg. React Native). Transformation of modules happens in parallel based on the amount of cores that you have.

Serialization

As soon as all the modules have been transformed they will be serialized. A serializer combines the modules to generate one or multiple bundles. A bundle is literally a bundle of modules combined into a single JavaScript file.

386 questions
320
votes
64 answers

Unable to load script.Make sure you are either running a Metro server or that your bundle 'index.android.bundle' is packaged correctly for release

react-native run-android command terminates by leaving a message in android simulator. The message is as follows: Unable to load script.Make sure you are either running a Metro server or that your bundle 'index.android.bundle' is packaged correctly…
Belle Solutions
  • 3,231
  • 2
  • 7
  • 4
176
votes
23 answers

How to resolve the error on 'react-native start'

I just installed node.js & cli installed node.js installed react-native-cli npm -g react-native-cli And created a 'new project'. react-native init new_project and inside that 'new_project' directory, I tired to see if metro bundler works…
Song Kevin
  • 1,761
  • 2
  • 7
  • 3
52
votes
11 answers

TypeError: cb.apply is not a function

I'm trying to run an existing React Native project that uses Metro Bundler. My operating system is Ubuntu 20.04 and I've tried to run the app both on a physical Android device and on an Android simulator that I created with Android Studio. I have…
Giorgio
  • 2,137
  • 3
  • 20
  • 40
52
votes
26 answers

No apps connected. Sending "reload" to all React Native apps failed. Make sure your app is running in the simulator or on a phone connected via USB

React Native app debug on real device has some problems; My metro bundler console gives warn: warn No apps connected. Sending "reload" to all React Native apps failed. Make sure your app is running in the simulator or on a phone connected via…
hakki
  • 6,181
  • 6
  • 62
  • 106
42
votes
7 answers

Metro bundler: Error: EISDIR: illegal operation on a directory, read

When I reload my bundle this exception is uncaught: Error: EISDIR: illegal operation on a directory, read at Object.readSync (fs.js:592:3) at tryReadSync (fs.js:366:20) at Object.readFileSync (fs.js:403:19) at…
Brady Dean
  • 3,378
  • 5
  • 24
  • 50
35
votes
2 answers

How to make Metro (React Native packager) ignore certain directories

Problem: My project has a @providesModule naming collision when trying to run react-native run-ios from the command line. It is conflicting with autogenerated dir dist/ which is created by another npm package, esdoc. I would like to be able to keep…
thurt
  • 882
  • 1
  • 10
  • 25
27
votes
4 answers

React Native Error Cannot find module 'metro-config/src/defaults/blacklist'

I'm currently working on a project in React Native, yesterday it was working perfectly with no errors, and now all of a sudden I'm getting this error. error Cannot find module 'metro-config/src/defaults/blacklist' Require stack: -…
Sri Amin
  • 282
  • 1
  • 4
  • 9
27
votes
5 answers

Unknown Option error from Babel in React-Native app

I am building a react-native app with typescript in order to learn react native. Once I run the app with expo start and try to run on emulator I get this error: index.js: [BABEL] ......../index.js: Unknown option: .name. Check out…
IbrahimD
  • 891
  • 1
  • 7
  • 14
26
votes
10 answers

react-native start giving Invalid regular expression invalid error

I followed following link to get started with react-native Getting started with react native I tried to create native app without expo so i as per documentation i followed following command npm install -g react-native-cli react-native init…
user4241989
24
votes
1 answer

React Native localhost Another debugger is already connected

Not sure if anyone had this problem, since I could not look it up anywhere but I cannot see any logs for react native app because the browser console tells me that "Another debugger is already connected" its a warning that keeps looping. Metro…
Nata Vacheishvili
  • 387
  • 1
  • 5
  • 18
17
votes
1 answer

Is it already possible to use top-level await in react-native?

Is it already possible to use top-level await in react-native? I saw it's been added to TypeScript 3.8 (I was not using TS, I just tried to see if it would help but no). However in react-native file transform is handled by babel and I don't think…
Alexis
  • 16,629
  • 17
  • 62
  • 107
15
votes
2 answers

React native debugger: "Error: ENOENT: no such file or directory"

Problem: When I run the remote debugger, metro server says it can't find this file. Error: ENOENT: no such file or directory, open…
Hery
  • 372
  • 2
  • 4
  • 11
15
votes
1 answer

What does babel do in react native?

I'm trying to figure out the build process for react native and what exactly it is that both the metro bundler and babeljs do. In particular what allows me to use ES5+ syntax. I'm finding some sources that seem to tell me something different. This…
user3512797
  • 303
  • 4
  • 7
15
votes
2 answers

React Native TypeScript: Unable to resolve module (but it exists)

I have a fresh React Native 0.61.1 project with TypeScript. It used to display the new project welcome screen perfectly. I've added a class, tried to import it (it even autocompleted), but it says the component could not be found. Here is my…
Can Poyrazoğlu
  • 33,241
  • 48
  • 191
  • 389
12
votes
2 answers

Network Security Config results in React Native app not connecting to metro server

I have a very weird issue that I am not able to solve. I am not sure how to Google this either because while I am familiar with React Native, I am not familiar with Android itself and not sure what my search term should be. So, in my react native…
callmekatootie
  • 10,989
  • 15
  • 69
  • 104
1
2 3
…
25 26