Metro Visualizer

0.56.4 verified Sat Apr 25 auth: no javascript

Suite of visual analysis tools for the Metro bundler. Version 0.56.4, released alongside React Native 0.64.0. Provides an interactive web-based dashboard to inspect bundle sizes, dependency graphs (with search and pathfinding), and build performance metrics. Differentiators: real-time build stats, module search and path visualization, customizable graph display. Requires Metro 0.56.3 and related packages.

Common errors

error Error: Cannot find module 'metro-visualizer' ↓

cause Package not installed or missing from node_modules.

fix

Run npm install metro-visualizer --save

error Error: Server options must be an object ↓

cause metro.config.js exports a function instead of an object, or server config is misplaced.

fix

Export a plain object with server: { enableVisualizer: true }. If using a function, return that object.

error Cannot GET /visualizer ↓

cause Visualizer endpoint not available; either not enabled or Metro is running in production mode.

fix

Check metro.config.js has enableVisualizer: true under server, and restart Metro in development mode.

Warnings

gotcha Visualizer only works when Metro runs in development mode. Production builds do not enable the endpoint. ↓

fix Ensure you run metro with NODE_ENV=development or without --production flag.

gotcha enableVisualizer must be set before Metro server starts. Changing config while server is running requires a restart. ↓

fix Restart Metro after changing config.

deprecated Metro Visualizer for versions 0.56.x may not be compatible with React Native 0.69+ due to Metro API changes. Consider using newer alternatives like @rnx-kit/metro-service or React Native bundle inspector. ↓

fix Upgrade to a compatible version or use official Metro debugging tools.

Install

npm install metro-visualizer

yarn add metro-visualizer

pnpm add metro-visualizer

Imports

enableVisualizer
wrong
```
module.exports = { enableVisualizer: true }
```
correct
```
server: { enableVisualizer: true }
```
Set in metro.config.js under server option, not top-level.

Quickstart

Enables the visualizer in Metro config and installs the package. After starting Metro, visit the visualizer endpoint.

// metro.config.js
module.exports = {
  server: {
    enableVisualizer: true
  }
};

// Install with npm install metro-visualizer --save
// Run metro: npx react-native start
// Open http://localhost:8081/visualizer in browser