{"id":19059,"library":"babel-plugin-fbt","title":"babel-plugin-fbt","description":"The main Babel transform plugin for Facebook's FBT (Facebook Translation) internationalization framework. Current stable version is 1.0.0, released with a regular cadence alongside the FBT ecosystem. It provides compile-time extraction and transformation of <fbt> elements and fbt() calls for localization. Key differentiators include React-integrated string interpolation with gender and number variations, and a hash-based string collection approach. Requires pairing with fbt-babel-plugin-runtime for runtime token resolution and @fbtjs/default-collection-transform for string collection outputs.","status":"active","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/facebook/fbt","tags":["javascript"],"install":[{"cmd":"npm install babel-plugin-fbt","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-fbt","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-fbt","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for converting collected strings to output format; peer dependency.","package":"@fbtjs/default-collection-transform","optional":false},{"reason":"Runtime counterpart needed for token replacement in production builds.","package":"babel-plugin-fbt-runtime","optional":true}],"imports":[{"note":"This is a Babel plugin, not a JS module for direct import. It's used in .babelrc or babel.config.js as 'babel-plugin-fbt'.","wrong":"import plugin from 'babel-plugin-fbt';","symbol":"default export (plugin)","correct":"module.exports = require('babel-plugin-fbt');"},{"note":"Babel resolves string plugin names automatically. Using require() works but is unnecessary and less portable.","wrong":"plugins: [require('babel-plugin-fbt')]","symbol":"Babel config usage","correct":"plugins: ['babel-plugin-fbt']"},{"note":"The package does not ship TypeScript types; custom type definitions would need to be created.","wrong":null,"symbol":"TypeScript type import","correct":"import type { FbtPluginOptions } from 'babel-plugin-fbt';"}],"quickstart":{"code":"// Install dependencies\nnpm install --save-dev babel-plugin-fbt @fbtjs/default-collection-transform\nnpm install --save fbt babel-plugin-fbt-runtime\n\n// babel.config.js\nmodule.exports = {\n  plugins: [\n    ['babel-plugin-fbt', {\n      fbtEnumPath: 'path/to/enums',\n      fbtCommonPath: 'path/to/common-strings.json',\n    }],\n    'babel-plugin-fbt-runtime'\n  ]\n};\n\n// Then in React code:\n<fbt desc=\"example\">Hello, <fbt:param name=\"name\">{name}</fbt:param>!</fbt>","lang":"javascript","description":"Installs the FBT Babel plugin and runtime, configures them, and demonstrates basic usage with a React JSX component."},"warnings":[{"fix":"Install @fbtjs/default-collection-transform as a devDependency.","message":"Version 1.0.0 changed peer dependency from fbt to @fbtjs/default-collection-transform.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Migrate to using @fbtjs/default-collection-transform and remove fbtCommonPath/fbtEnumPath from plugin options.","message":"The fbtCommonPath and fbtEnumPath options are deprecated in favor of using the collection transform.","severity":"deprecated","affected_versions":">=0.16.0"},{"fix":"Ensure plugins are ordered correctly: first babel-plugin-fbt, then babel-plugin-fbt-runtime.","message":"Plugin order matters: babel-plugin-fbt must come before babel-plugin-fbt-runtime in the plugins array.","severity":"gotcha","affected_versions":">=0.12.0"},{"fix":"Install fbt as a regular dependency: npm install fbt","message":"The fbt package must be installed as a runtime dependency, not devDependency, for the runtime plugin to work.","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 --save-dev @fbtjs/default-collection-transform","cause":"Missing peer dependency after upgrading to v1.0.0.","error":"Error: Cannot find module '@fbtjs/default-collection-transform'"},{"fix":"Install babel-plugin-fbt-runtime and add it to babel.config.js after babel-plugin-fbt.","cause":"Runtime plugin is not installed or configured, or fbt runtime import is missing.","error":"TypeError: Cannot read properties of undefined (reading 'fbt')"},{"fix":"Ensure @babel/preset-react is included and that babel-plugin-fbt appears before the runtime plugin in the plugins array.","cause":"Babel is not configured to parse JSX, or the plugin order is wrong.","error":"SyntaxError: Unexpected token, expected \"...\" while parsing JSX with <fbt>"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}