fbtee

library1.7.3jsnpmunverified

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.

web-framework serialization

npm install fbtee

github ↗package ↗

INSTALL

IMPORT

SIG · FBTEE

fbtee

web-frameworkjavascriptv1.7.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

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

fbt

✓ import { fbt } from 'fbtee';

✗ const fbt = require('fbtee');

The primary JSX component for declaring translatable strings directly within React components.

FbtParam

✓ import { FbtParam } from 'fbtee';

✗ import FbtParam from 'fbtee';

Used as a child of `fbt` to inject dynamic data or React elements (e.g., variables, other components) into a translated string.

LocaleContext

✓ import { LocaleContext } from 'fbtee';

✗ import LocaleContext from 'fbtee';

Provides the current locale and locale-switching capabilities, typically used to wrap the root of your application.

fbs

✓ import { fbs } from 'fbtee';

✗ import fbs from 'fbtee';

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.

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.

/* package.json (excerpt for context): { "name": "fbtee-quickstart", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "tsc && vite build", "collect": "fbtee collect", "translate": "fbtee translate" }, "dependencies": { "fbtee": "^1.7.3", "react": "^19.0.0", "react-dom": "^19.0.0" }, "devDependencies": { "@nkzw/babel-preset-fbtee": "^1.7.3", "@vitejs/plugin-react": "^4.2.1", "typescript": "^5.2.2", "vite": "^5.2.0" } } */ // vite.config.ts import fbteePreset from '@nkzw/babel-preset-fbtee'; import react from '@vitejs/plugin-react'; import { defineConfig } from 'vite'; export default defineConfig({ plugins: [ react({ babel: { presets: [fbteePreset] } }) ] }); // src/App.tsx import { fbt, FbtParam } from 'fbtee'; import React from 'react'; const Name = ({ name }: { name: string }) => ( <FbtParam name="name">{name}</FbtParam> ); const App = () => { const userName = 'Alice'; const itemCount = 5; return ( <div style={{ fontFamily: 'sans-serif', padding: '20px' }}> <h1> <fbt desc="Welcome title"> Welcome to <FbtParam name="app">fbtee Demo</FbtParam>! </fbt> </h1> <p> <fbt desc="Greeting message"> Hello, <Name name={userName} />! You have{' '} <FbtParam name="count" number={itemCount}> {itemCount} </FbtParam>{' '} new items in your cart. </fbt> </p> <p> <fbt desc="Simple goodbye message">Goodbye!</fbt> </p> <button onClick={() => alert('Locale switching not implemented in this snippet.')}> Switch Locale (conceptual) </button> <p> <em>Remember to run `npm run collect` and `npm run translate`!</em> </p> </div> ); }; export default App;

Debug

Known issues

breakingAs 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.

fix

Remove any explicit `String()` casts around `fbs()` function calls in your codebase.

affects: >=1.5.0

gotchafbtee requires Node.js version 22 or higher and React version 19 or higher. Using older versions will lead to compatibility issues and runtime errors.

fix

Ensure your Node.js environment is at least 22 and your React and React DOM packages are at version 19 or newer.

affects: >=0.0.2

gotchaCorrect 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.

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).

affects: >=0.0.2

gotchaThe `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.

fix

Integrate `npm run collect` (or `fbtee collect`) and `npm run translate` (or `fbtee translate`) into your development and CI/CD scripts.

affects: >=0.0.2

gotchaImplicit React Fragments (`<>`) are supported within `<fbt:param>` elements since v0.1.0. If you are on an older version or experience issues, ensure your fragments are correctly formed.

fix

Upgrade `fbtee` to version 0.1.0 or later to ensure full support for implicit React Fragments within `<fbt:param>`.

affects: <0.1.0

Errors

Common errors & fixes

Invariant Violation: The Babel plugin 'fbt' must be configured.

The `@nkzw/babel-preset-fbtee` is not correctly installed or configured in the build pipeline, preventing the Babel plugin from running.

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.

ReferenceError: fbt is not defined

The `fbt` JSX components are not being transformed by the Babel plugin at build time, leading to a runtime error.

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.

Error: Missing source_strings.json

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.

fix

Run `npm run collect` (or `fbtee collect`) to generate the `source_strings.json` file before attempting to run the translation compilation step.

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

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.

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`.

Upgrade

Version history

1.7.3latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React applications, providing the JSX runtime and component model.

@nkzw/babel-plugin-fbteerequiredPeer dependency for the Babel plugin required to extract and compile translatable strings from source code.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/nkzw-tech/fbtee ↗

packagehttps://www.npmjs.com/package/fbtee ↗