{"id":10880,"library":"fbtee","title":"fbtee - React Internationalization Framework","description":"fbtee (Far Better Translations, Extended Edition) is a robust internationalization framework for JavaScript and React applications, currently stable at version 1.7.3. It differentiates itself by building upon Facebook's battle-tested `fbt` library, which has served billions of users in production environments for over a decade. The framework emphasizes an intuitive developer experience through inline translations embedded directly in code, eliminating the need for translation keys or wrapper functions. It uses a compiler-based approach to extract translatable strings and optimizes runtime performance by compiling translations into an Intermediate Representation. fbtee supports dynamic content, pluralization, lists, and provides straightforward integration with modern build tools like Vite and Next.js, often with pre-configured templates available for quick setup. It maintains an active development cycle with regular releases, enhancing features and streamlining the i18n workflow.","status":"active","version":"1.7.3","language":"javascript","source_language":"en","source_url":"https://github.com/nkzw-tech/fbtee","tags":["javascript","fbt","globalization","i18n","internationalization","l10n","localization","react","translation","typescript"],"install":[{"cmd":"npm install fbtee","lang":"bash","label":"npm"},{"cmd":"yarn add fbtee","lang":"bash","label":"yarn"},{"cmd":"pnpm add fbtee","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React applications, providing the JSX runtime and component model.","package":"react","optional":false},{"reason":"Peer dependency for the Babel plugin required to extract and compile translatable strings from source code.","package":"@nkzw/babel-plugin-fbtee","optional":false}],"imports":[{"note":"The primary JSX component for declaring translatable strings directly within React components.","wrong":"const fbt = require('fbtee');","symbol":"fbt","correct":"import { fbt } from 'fbtee';"},{"note":"Used as a child of `fbt` to inject dynamic data or React elements (e.g., variables, other components) into a translated string.","wrong":"import FbtParam from 'fbtee';","symbol":"FbtParam","correct":"import { FbtParam } from 'fbtee';"},{"note":"Provides the current locale and locale-switching capabilities, typically used to wrap the root of your application.","wrong":"import LocaleContext from 'fbtee';","symbol":"LocaleContext","correct":"import { LocaleContext } from 'fbtee';"},{"note":"A programmatic function for creating translatable strings outside of JSX. Since v1.5.0, `fbs()` calls are automatically converted to strings, no explicit `String()` casting is needed.","wrong":"import fbs from 'fbtee';","symbol":"fbs","correct":"import { fbs } from 'fbtee';"}],"quickstart":{"code":"/*\n package.json (excerpt for context):\n {\n \"name\": \"fbtee-quickstart\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"tsc && vite build\",\n \"collect\": \"fbtee collect\",\n \"translate\": \"fbtee translate\"\n },\n \"dependencies\": {\n \"fbtee\": \"^1.7.3\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\"\n },\n \"devDependencies\": {\n \"@nkzw/babel-preset-fbtee\": \"^1.7.3\",\n \"@vitejs/plugin-react\": \"^4.2.1\",\n \"typescript\": \"^5.2.2\",\n \"vite\": \"^5.2.0\"\n }\n }\n*/\n\n// vite.config.ts\nimport fbteePreset from '@nkzw/babel-preset-fbtee';\nimport react from '@vitejs/plugin-react';\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n plugins: [\n react({\n babel: {\n presets: [fbteePreset]\n }\n })\n ]\n});\n\n// src/App.tsx\nimport { fbt, FbtParam } from 'fbtee';\nimport React from 'react';\n\nconst Name = ({ name }: { name: string }) => (\n {name}\n);\n\nconst App = () => {\n const userName = 'Alice';\n const itemCount = 5;\n\n return (\n
\n
\n \n Welcome to fbtee Demo!\n \n
\n
\n \n Hello, ! You have{' '}\n \n {itemCount}\n {' '}\n new items in your cart.\n \n
\n
\n Goodbye!\n
\n \n
\n Remember to run `npm run collect` and `npm run translate`!\n
\n
\n );\n};\n\nexport default App;\n","lang":"typescript","description":"Demonstrates how to set up `fbtee` in a Vite project with React 19, including the necessary Babel preset configuration, and how to use the `fbt` component with `FbtParam` for dynamic internationalized strings."},"warnings":[{"fix":"Remove any explicit `String()` casts around `fbs()` function calls in your codebase.","message":"As of v1.5.0, explicit String() casting for `fbs()` calls is no longer required as they are automatically converted to strings. Continuing to use `String()` might be redundant or cause warnings.","severity":"breaking","affected_versions":">=1.5.0"},{"fix":"Ensure your Node.js environment is at least 22 and your React and React DOM packages are at version 19 or newer.","message":"fbtee requires Node.js version 22 or higher and React version 19 or higher. Using older versions will lead to compatibility issues and runtime errors.","severity":"gotcha","affected_versions":">=0.0.2"},{"fix":"Verify `@nkzw/babel-preset-fbtee` is correctly installed and configured in your build toolchain (e.g., `vite.config.ts` for Vite, `babel.config.js` for Next.js).","message":"Correct Babel configuration with `@nkzw/babel-preset-fbtee` is critical. Without it, `fbtee` cannot extract strings or compile translations, leading to untranslated content or build failures.","severity":"gotcha","affected_versions":">=0.0.2"},{"fix":"Integrate `npm run collect` (or `fbtee collect`) and `npm run translate` (or `fbtee translate`) into your development and CI/CD scripts.","message":"The `fbtee` workflow relies on two essential CLI commands: `fbtee collect` to extract source strings and `fbtee translate` to compile translated files. Failing to run these commands will result in missing or untranslated content in your application.","severity":"gotcha","affected_versions":">=0.0.2"},{"fix":"Upgrade `fbtee` to version 0.1.0 or later to ensure full support for implicit React Fragments within ``.","message":"Implicit React Fragments (`<>`) are supported within `` elements since v0.1.0. If you are on an older version or experience issues, ensure your fragments are correctly formed.","severity":"gotcha","affected_versions":"<0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Install `@nkzw/babel-preset-fbtee` via npm/yarn and add it to your Babel presets in `vite.config.ts`, `babel.config.js`, or similar configuration file.","cause":"The `@nkzw/babel-preset-fbtee` is not correctly installed or configured in the build pipeline, preventing the Babel plugin from running.","error":"Invariant Violation: The Babel plugin 'fbt' must be configured."},{"fix":"Ensure your Babel configuration correctly applies `@nkzw/babel-preset-fbtee` to the files containing `fbt` components, and that your build process is using this Babel configuration.","cause":"The `fbt` JSX components are not being transformed by the Babel plugin at build time, leading to a runtime error.","error":"ReferenceError: fbt is not defined"},{"fix":"Run `npm run collect` (or `fbtee collect`) to generate the `source_strings.json` file before attempting to run the translation compilation step.","cause":"The `fbtee translate` command was executed before the `source_strings.json` file was generated by the `fbtee collect` command, or the file is not in the expected path.","error":"Error: Missing source_strings.json"},{"fix":"Verify `fbt` and `FbtParam` are correctly imported as named exports from 'fbtee'. Also, ensure your `react` and `react-dom` packages are at version 19 or higher as required by `fbtee`.","cause":"This generic React error can occur if `fbt` or `FbtParam` are not correctly imported or if an older React version (e.g., pre-19) is used where `fbtee` expects modern features.","error":"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined."}],"ecosystem":"npm"}