• 03-Jan-2023
Lightrun Team
Author Lightrun Team
Share
This is a glossary of all the common issues in Facebook Metro

Troubleshooting Common Issues in Facebook Metro

Lightrun Team
Lightrun Team
03-Jan-2023

Project Description

 

Metro is a JavaScript bundler developed by Facebook that is primarily used to bundle JavaScript code for React Native applications. It is designed to be fast, flexible, and easy to use, and it supports a wide range of features to help you build high-quality apps.

Some of the key features of Metro include:

  • Fast incremental builds: Metro uses a incremental compilation algorithm that only rebuilds the code that has changed, which helps to speed up build times.
  • Code transformation: Metro can transform your code using Babel or other code transformation tools, allowing you to use modern JavaScript features even if your target platform does not support them natively.
  • Source map support: Metro can generate source maps for your code, which can be used to debug your application in the browser.
  • Asset management: Metro can handle the process of copying and optimizing assets like images and fonts, making it easy to include these in your application.

Overall, Metro is a powerful tool that can help you build high-quality React Native applications more efficiently. If you are working on a React Native project, you may want to consider using Metro to manage your build process.

Troubleshooting Facebook Metro with the Lightrun Developer Observability Platform

 

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.
  • Instantly add logs to, set metrics in, and take snapshots of live applications
  • Insights delivered straight to your IDE or CLI
  • Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

The following issues are the most popular issues regarding this project:

Modules required from outside of root directory does not find node_modules

 

An update to the metro.config.js file has been released, making it compatible with React Native 0.59+ and beyond:

const path = require('path');

module.exports = {
  /**
   * Ensure any imports inside the shared 'components' folder resolve to the local node_modules folder
   */
  resolver: {
    extraNodeModules: new Proxy({}, {
      get: (target, name) => path.join(process.cwd(), `node_modules/${name}`),
    }),
  },
 /**
   * Add our workspace roots so that react native can find the source code for the included packages
   * in the monorepo
   */
  projectRoot: path.resolve(__dirname),
  watchFolders: [
    path.resolve(__dirname, "../../components"),
    path.resolve(__dirname, "../../node_modules")
  ]
}

 

Error: EISDIR: illegal operation on a directory, read

 

Upon opening Devtools, it appears that an error has occurred.

That’s because Chrome added support for source maps.

Go to the developer tools (F12 in the browser), then select the three dots in the upper right corner, and go to Settings.

Then, look for Sources, and disable the options:

  • “Enable JavaScript source maps”
  • “Enable CSS source maps”

If you take this action, the warnings will be removed. Your code is not implicated in any way; inspection of other pages’ developer tools shows that similar alerts are present.

Android bundle not loading from metro-bundler server

 

In order to ensure your yarn android relies on the metro dev server instead of index.android.bundle, it is important that you remove import com.facebook.react.BuildConfig from MainApplication.java

unable to resolve path outside root directory

 

If you are seeing an error saying that Metro is unable to resolve a path outside of the root directory, it means that Metro is unable to find the file or module that you are trying to import. This can happen for a number of reasons, including:

  • The file or module you are trying to import does not exist at the specified path.
  • The file or module you are trying to import is located outside of the root directory that Metro is configured to search, and Metro has not been configured to search for it.

To resolve this issue, you will need to do one or more of the following:

  • Make sure that the file or module you are trying to import actually exists at the specified path.
  • Configure Metro to search for files and modules outside of the root directory. This can be done by adding an extraNodeModules field to your Metro configuration. For example:
{
  // ...
  extraNodeModules: {
    'my-external-module': path.resolve(__dirname, '../my-external-module'),
  },
  // ...
}

 

More issues from Facebook repos

Share

It’s Really not that Complicated.

You can actually understand what’s going on inside your live applications. It’s a registration form away.

Get Lightrun

Lets Talk!

Looking for more information about Lightrun and debugging?
We’d love to hear from you!
Drop us a line and we’ll get back to you shortly.

By submitting this form, I agree to Lightrun’s Privacy Policy and Terms of Use.