Registry / devops / metro-bridge

metro-bridge

JSON →
library0.2.7jsnpmunverified

A comprehensive CDP/Metro bridge for React Native development tooling, providing target discovery, WebSocket CDP session management, a proxy multiplexer for sharing a single Hermes connection across multiple debuggers (required for RN <0.85), a high-level Bridge API (MetroBridge), DevTools launcher, and optional app-side client SDK. Current stable version is 0.2.7, released on npm with TypeScript types included. Release cadence is irregular. Key differentiators vs alternatives: built specifically for React Native and Hermes, handles Metro inspector proxy nuances (multi-session detection, port scanning), and provides both high-level convenience (MetroBridge) and low-level CDP access (CDPSession). Requires Node >=18.

npm install metro-bridge
INSTALL
IMPORT
SIG · METRO-BRIDGE
M
metro-bridge
devopsjavascriptv0.2.7
harness data pending
Install & Compatibility
Where this runs

No compatibility data collected yet for this library.

Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

MetroBridge
import { MetroBridge } from 'metro-bridge'
import MetroBridge from 'metro-bridge'
MetroBridge is a named export, not default. Common mistake for developers migrating from CJS.
CDPSession
import { CDPSession } from 'metro-bridge'
const { CDPSession } = require('metro-bridge')
Package is ESM-only since Node>=18. Using require() will fail with ERR_REQUIRE_ESM. Use import statement instead.
MetroDiscovery
import { MetroDiscovery } from 'metro-bridge'
import { MetroDiscovery } from 'metro-bridge/src/MetroDiscovery'
Do not import from internal paths; they are not part of the public API and may change without notice.
fetchTargets
import { fetchTargets } from 'metro-bridge'
Standalone function; also accessible as a method on MetroDiscovery instance.
selectBestTarget
import { selectBestTarget } from 'metro-bridge'
Returns the target with highest priority (Bridgeless > Hermes > standard).
scanMetroPorts
import { scanMetroPorts } from 'metro-bridge'
Scans common Metro ports on localhost; returns array of port numbers.
supportsMultipleDebuggers
import { supportsMultipleDebuggers } from 'metro-bridge'
Checks target capabilities. Use to decide if CDPMultiplexer is needed.
CDPMultiplexer
import { CDPMultiplexer } from 'metro-bridge'
import { CDPMultiplexer } from 'metro-bridge/multiplexer'
Only needed for React Native <0.85. On 0.85+, Metro supports native multi-session and multiplexer is unnecessary.

Shows both high-level MetroBridge and low-level CDPSession usage, including target discovery and evaluation.

import { MetroBridge } from 'metro-bridge'; import { MetroDiscovery, selectBestTarget, supportsMultipleDebuggers, CDPSession } from 'metro-bridge'; async function example() { // High-level API: connect to Metro on port 8081 try { const bridge = await MetroBridge.connect(8081); const count = await bridge.evaluate<number>('globalThis.__itemCount'); console.log('Item count:', count); await bridge.close(); } catch { console.log('Metro not running, skipping'); } // Low-level: discover targets and attach CDP session const discovery = new MetroDiscovery(8081); const targets = await discovery.discover(); if (targets.length === 0) { console.log('No targets found'); return; } const target = selectBestTarget(targets); const supportsMulti = supportsMultipleDebuggers(target); console.log('Supports multiple debuggers:', supportsMulti); const session = await CDPSession.connect(target); const result = await session.send('Runtime.evaluate', { expression: '1 + 1', returnByValue: true, }); console.log('Evaluation result:', result); await session.close(); } example().catch(console.error);
Debug
Known issues
breakingPackage is ESM-only; requires Node >=18. CommonJS require() will throw ERR_REQUIRE_ESM.
fix
Use import statements instead of require(). Ensure Node version >=18.
affects: >=0.0.0
gotchaCDPMultiplexer is only needed for React Native <0.85. On RN 0.85+, Metro supports multiple concurrent debugger connections natively, and using CDPMultiplexer may cause conflicts.
fix
Check supportsMultipleDebuggers(target) before deciding to use CDPMultiplexer.
affects: >=0.0.0
gotchaMetroBridge.connect() throws if Metro is not running. Use MetroBridge.tryConnect() for optional connection.
fix
Wrap MetroBridge.connect() in try/catch or use tryConnect() which returns null on failure.
affects: >=0.0.0
deprecatedSome internal functions may change without notice. Avoid importing from subpaths like 'metro-bridge/src/'.
fix
Only use top-level exports documented in the README.
affects: >=0.0.0
Errors
Common errors & fixes
Error [ERR_REQUIRE_ESM]: require() of ES Module /path/to/node_modules/metro-bridge/build/index.js not supported.
metro-bridge is ESM-only; CommonJS require() is not supported.
fix
Change const x = require('metro-bridge') to import { x } from 'metro-bridge' in your code, and ensure your project uses ESM ("type": "module" in package.json) or a bundler that handles ESM.
TypeError: MetroBridge is not a constructor
Using default import instead of named import: import MetroBridge from 'metro-bridge'.
fix
Use import { MetroBridge } from 'metro-bridge' with curly braces.
Error: connect ECONNREFUSED ::1:8081
Metro bundler is not running on port 8081, or connection refused due to firewall or host mismatch.
fix
Ensure Metro is running: npx react-native start. If using a different port, pass it to MetroBridge.connect(port). Also try using 127.0.0.1 instead of localhost if IPv6 issues occur.
TypeError: Cannot read properties of undefined (reading 'webSocketDebuggerUrl')
The target object passed to CDPSession.connect is missing the webSocketDebuggerUrl property, possibly due to an invalid target or an outdated Metro version.
fix
Verify that the target is valid: use selectBestTarget() from fetched targets. Ensure Metro version >=0.70.0. If using a custom discovery, check that the target object has the webSocketDebuggerUrl field.
Upgrade
Version history
0.2.7latest on npm
Audit
Dependencies
wsrequiredRequired for WebSocket communication with Metro's CDP targets.
chrome-launcheroptionalOptional dependency needed for openDevTools() to launch Chrome DevTools.
chromium-edge-launcheroptionalOptional dependency needed for openDevTools() to launch Edge DevTools.
Agent activity
9 hits · last 30 days
node
8
Amazon
1
Resources
metro-bridge — npm install metro-bridge · libregistry