{"id":18554,"library":"metro-visualizer","title":"Metro Visualizer","description":"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.","status":"active","version":"0.56.4","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install metro-visualizer","lang":"bash","label":"npm"},{"cmd":"yarn add metro-visualizer","lang":"bash","label":"yarn"},{"cmd":"pnpm add metro-visualizer","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core bundler; visualizer hooks into Metro server","package":"metro","optional":false},{"reason":"Enables Babel transpilation for Metro config and modules","package":"metro-babel-register","optional":false},{"reason":"Provides core types and utilities for Metro plugins","package":"metro-core","optional":false}],"imports":[{"note":"Set in metro.config.js under server option, not top-level.","wrong":"module.exports = { enableVisualizer: true }","symbol":"enableVisualizer","correct":"server: { enableVisualizer: true }"}],"quickstart":{"code":"// metro.config.js\nmodule.exports = {\n  server: {\n    enableVisualizer: true\n  }\n};\n\n// Install with npm install metro-visualizer --save\n// Run metro: npx react-native start\n// Open http://localhost:8081/visualizer in browser","lang":"javascript","description":"Enables the visualizer in Metro config and installs the package. After starting Metro, visit the visualizer endpoint."},"warnings":[{"fix":"Ensure you run metro with NODE_ENV=development or without --production flag.","message":"Visualizer only works when Metro runs in development mode. Production builds do not enable the endpoint.","severity":"gotcha","affected_versions":">=0.56.0 <1.0.0"},{"fix":"Restart Metro after changing config.","message":"enableVisualizer must be set before Metro server starts. Changing config while server is running requires a restart.","severity":"gotcha","affected_versions":">=0.56.0"},{"fix":"Upgrade to a compatible version or use official Metro debugging tools.","message":"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.","severity":"deprecated","affected_versions":"0.56.x"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run npm install metro-visualizer --save","cause":"Package not installed or missing from node_modules.","error":"Error: Cannot find module 'metro-visualizer'"},{"fix":"Export a plain object with server: { enableVisualizer: true }. If using a function, return that object.","cause":"metro.config.js exports a function instead of an object, or server config is misplaced.","error":"Error: Server options must be an object"},{"fix":"Check metro.config.js has enableVisualizer: true under server, and restart Metro in development mode.","cause":"Visualizer endpoint not available; either not enabled or Metro is running in production mode.","error":"Cannot GET /visualizer"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}