{"id":20212,"library":"metro-react-native-babel-transformer","title":"metro-react-native-babel-transformer","description":"Babel transformer for React Native applications, part of the Metro bundler ecosystem. Current stable version is 0.84.3 (released 2025-04). Release cadence is frequent patches and minor versions. Key differentiator: it is the default transformer in React Native projects, handling JSX, Flow, and React Native-specific transforms. It integrates with Metro's caching and module system. Alternatives like @babel/preset-react are lower-level and do not include React Native's custom plugin set.","status":"active","version":"0.77.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/facebook/metro","tags":["javascript","transformer","react-native","metro"],"install":[{"cmd":"npm install metro-react-native-babel-transformer","lang":"bash","label":"npm"},{"cmd":"yarn add metro-react-native-babel-transformer","lang":"bash","label":"yarn"},{"cmd":"pnpm add metro-react-native-babel-transformer","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for Babel transformation","package":"@babel/core","optional":false}],"imports":[{"note":"This package is CJS-only; no ESM export. Default export is a function.","wrong":"import metroReactNativeBabelTransformer from 'metro-react-native-babel-transformer';","symbol":"metroReactNativeBabelTransformer","correct":"const metroReactNativeBabelTransformer = require('metro-react-native-babel-transformer');"},{"note":"CommonJS destructuring works; ESM named import will fail.","wrong":"import { transform } from 'metro-react-native-babel-transformer';","symbol":"transform","correct":"const { transform } = require('metro-react-native-babel-transformer');"},{"note":"getCacheKey is a named export, not default.","wrong":"import getCacheKey from 'metro-react-native-babel-transformer';","symbol":"getCacheKey","correct":"const { getCacheKey } = require('metro-react-native-babel-transformer');"}],"quickstart":{"code":"const babelTransformer = require('metro-react-native-babel-transformer');\nconst { transform, getCacheKey } = require('metro-react-native-babel-transformer');\n\n// Example: transform a simple JSX file\nconst code = `import React from 'react'; const App = () => <View />;`;\nconst result = transform({\n  filename: 'App.js',\n  src: Buffer.from(code),\n  options: {\n    dev: true,\n    hot: true,\n    platform: 'ios',\n    projectRoot: '/path/to/project',\n    publicPath: '/assets',\n    minify: false,\n  },\n});\nconsole.log(result.code); // Transformed code string\nconsole.log(result.map); // Source map object\n\n// Cache key\nconsole.log(getCacheKey());","lang":"javascript","description":"Demonstrates importing the transformer and running a basic transformation with typical options."},"warnings":[{"fix":"Upgrade to Node >=20.19 or >=22.x. Use version 0.83.x if stuck on older Node.","message":"Node v21, v23, and LTS minors before v20.19 are no longer supported.","severity":"breaking","affected_versions":">=0.84.0"},{"fix":"Switch to @react-native/babel-preset for custom Babel configurations.","message":"The package is part of Metro; consider using @react-native/babel-preset for direct Babel preset usage.","severity":"deprecated","affected_versions":"<=0.77.0"},{"fix":"Always call Buffer.from(code) before passing to transform.","message":"The transformer expects a Buffer for src, not a string. Passing a string may cause unexpected errors.","severity":"gotcha","affected_versions":"*"},{"fix":"Ensure options contains at least dev, hot, platform, projectRoot, publicPath, minify.","message":"The options object must include all required fields (dev, hot, platform, projectRoot, publicPath, minify). Missing fields can cause silent failures.","severity":"gotcha","affected_versions":"*"}],"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-react-native-babel-transformer' or add it to package.json.","cause":"Package is not installed or not in node_modules.","error":"Error: Cannot find module 'metro-react-native-babel-transformer'"},{"fix":"Use 'const { transform } = require('metro-react-native-babel-transformer');'","cause":"Incorrect import: using ESM import statement instead of CJS require.","error":"TypeError: transform is not a function"},{"fix":"Pass Buffer.from(yourCodeString) as src.","cause":"Passing a string as src instead of Buffer.","error":"TypeError: src must be a Buffer"},{"fix":"Ensure options contains platform: 'ios' or 'android'.","cause":"Missing required option in transform call.","error":"Error: The 'platform' option must be specified."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}