{"id":18551,"library":"metro-bundler","title":"Metro Bundler","description":"Metro is the JavaScript bundler for React Native, currently at v0.84.3. It is maintained by Meta and releases follow a regular cadence aligned with React Native releases. Metro focuses on sub-second reload cycles, fast startup, and handling thousands of modules. It is deeply integrated with React Native's development workflow, providing Fast Refresh, HMR, and a symmetric asset system. Compared to alternatives like Webpack, Metro is purpose-built for React Native, offering out-of-the-box support for React Native's module system, asset loading, and platform-specific code. It is configurable via metro.config.js and supports both CommonJS and ES modules.","status":"active","version":"0.22.1","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/facebook/metro-bundler","tags":["javascript"],"install":[{"cmd":"npm install metro-bundler","lang":"bash","label":"npm"},{"cmd":"yarn add metro-bundler","lang":"bash","label":"yarn"},{"cmd":"pnpm add metro-bundler","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for Metro CLI integration with React Native","package":"@react-native/community-cli-plugin","optional":true},{"reason":"Metro is designed to work with React Native applications","package":"react-native","optional":true}],"imports":[{"note":"Metro's default export is the server instance. Use named imports for sub-parts.","wrong":"const Metro = require('metro')","symbol":"Metro","correct":"import Metro from 'metro'"},{"note":"Named export from 'metro'. Use when creating a custom Metro server.","wrong":"const { Server } = require('metro')","symbol":"Server","correct":"import { Server } from 'metro'"},{"note":"Available since v0.80.0. Creates Connect middleware.","wrong":null,"symbol":"createConnectMiddleware","correct":"import { createConnectMiddleware } from 'metro'"},{"note":"loadConfig is exported from 'metro' directly. Not from 'metro/config'.","wrong":"const { loadConfig } = require('metro/config');","symbol":"loadConfig","correct":"import { loadConfig } from 'metro'"}],"quickstart":{"code":"import Metro from 'metro';\nimport express from 'express';\n\nconst app = express();\nconst config = await Metro.loadConfig();\nconst metroServer = await Metro.runMetro(config);\n\napp.use(metroServer.processRequest.bind(metroServer));\napp.listen(8081, () => {\n  console.log('Metro server running on 8081');\n});","lang":"typescript","description":"Starts a Metro bundler server with custom Express integration."},"warnings":[{"fix":"Upgrade to Node v20.19 or later, or pin Metro to v0.83.x","message":"v0.84.0 drops support for Node v21, v23, and LTS minors released before v20.19","severity":"breaking","affected_versions":">=0.84.0"},{"fix":"Upgrade your project's Babel to v7","message":"v0.80.0 removed support for Babel 6; requires Babel 7+","severity":"breaking","affected_versions":">=0.80.0"},{"fix":"Rename to `metro.config.mjs` or move to `.config/metro.js`","message":"`metro.config.js` is deprecated in favor of `metro.config.mjs` or `.metro/metro.config.js`","severity":"deprecated","affected_versions":">=0.83.0"},{"fix":"Upgrade to v0.83.4+ or configure keepalive manually","message":"Fast Refresh may not work in some proxied environments without keepalive","severity":"gotcha","affected_versions":"<0.83.4"},{"fix":"Update code to handle asset objects, e.g., asset.uri","message":"Asset system changed: require('image.png') now returns an object instead of a number","severity":"breaking","affected_versions":">=0.72.0"},{"fix":"Ensure Babel configuration includes @babel/plugin-transform-modules-commonjs","message":"Using `require` for ES modules may cause runtime errors if not transpiled","severity":"gotcha","affected_versions":">=0.80.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run `npm install react-native` and ensure metro.config.js has proper watchFolders","cause":"Missing or misconfigured React Native dependency","error":"Unable to resolve module `react-native` from `...`"},{"fix":"Add `@babel/preset-env` or `@babel/plugin-transform-modules-commonjs` to Babel config","cause":"Babel transform not applied to ES module syntax","error":"SyntaxError: Unexpected token 'export'"},{"fix":"Use `import { loadConfig } from 'metro'` instead of 'metro-config'","cause":"Metro version mismatch or incorrect import path","error":"Error: Cannot find module 'metro-config'"},{"fix":"Kill the process using port 8081 or set a different port in metro.config.js","cause":"Port 8081 already in use","error":"Metro server crashed: Error: listen EADDRINUSE :::8081"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}