{"id":19233,"library":"babel-plugin-ttag","title":"babel-plugin-ttag","description":"babel-plugin-ttag (formerly babel-plugin-c-3po) is a Babel plugin for extracting and resolving gettext-like translations at compile time. Current stable version is 1.8.16, released periodically. It uses ES6 tagged template literals (e.g., t`hello`), works with GNU gettext .po files, and offers compile-time resolution with no runtime overhead in the browser. Key differentiators: native template syntax (no sprintf), intelligent extraction by Babel, fast feedback loop (warns on missing translations), and support for universal apps (Node.js and browser). It includes support for plurals (ngettext/msgid), contexts (tct), and JSX without additional configuration. Requires ttag runtime package as a peer dependency.","status":"active","version":"1.8.16","language":"javascript","source_language":"en","source_url":"https://github.com/ttag-org/babel-plugin-ttag","tags":["javascript","gettext","translations","babel-plugin","i18n"],"install":[{"cmd":"npm install babel-plugin-ttag","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-ttag","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-ttag","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime library providing tagged template functions (t, ngettext, msgid, etc.) used in source code.","package":"ttag","optional":false}],"imports":[{"note":"t is a named export, not default.","wrong":"import t from 'ttag'","symbol":"t","correct":"import { t } from 'ttag'"},{"note":"ngettext is from the runtime package 'ttag', not the plugin.","wrong":"import { ngettext } from 'babel-plugin-ttag'","symbol":"ngettext","correct":"import { ngettext, msgid } from 'ttag'"},{"note":"tct is a named export for context translation.","wrong":"import tct from 'ttag'","symbol":"tct","correct":"import { tct } from 'ttag'"},{"note":"Plugin name must be exactly 'babel-plugin-ttag' in .babelrc or babel config.","wrong":"{\n  plugins: ['ttag']\n}","symbol":"BabelPluginTtag (plugin configuration)","correct":"{\n  plugins: ['babel-plugin-ttag']\n}"}],"quickstart":{"code":"npm install --save-dev babel-plugin-ttag && npm install --save ttag\n\n// .babelrc\n{\n  \"plugins\": [\"babel-plugin-ttag\"]\n}\n\n// src/index.js\nimport { t, ngettext, msgid } from 'ttag';\n\nconst name = 'World';\nconsole.log(t`Hello ${name}!`);\n\nconst count = 5;\nconsole.log(ngettext(msgid`${count} item`, `${count} items`, count));\n\n// Extract translations: npx ttag extract src/**/*.js -o translations.pot\n// Compile translations: npx ttag po2json translations.po -o translations.json\n// Then configure plugin to use translations:\n// \"plugins\": [[\"babel-plugin-ttag\", { \"translations\": \"translations.json\" }]]","lang":"javascript","description":"Installation, basic usage with t and ngettext, plus extraction and compilation commands."},"warnings":[{"fix":"Update package references and configuration to use 'babel-plugin-ttag' and ensure the runtime package 'ttag' is installed.","message":"Prior to version 1.0, the package was named babel-plugin-c-3po. The API and configuration may differ. Existing code using 'babel-plugin-c-3po' will not work with 'babel-plugin-ttag' without adjustments.","severity":"breaking","affected_versions":">=0.x <1.0"},{"fix":"Use 'babel-plugin-ttag' instead of 'c-3po' in your Babel configuration.","message":"Usage of 'c-3po' as a plugin name is deprecated and not supported in this version.","severity":"deprecated","affected_versions":">=1.0"},{"fix":"Use the default 't' tag or configure custom tags via plugin options (e.g., { functions: ['t', 'myTag'] }).","message":"The plugin extracts tagged template literals with the tag 't' only. If you alias or rename the import, extraction may fail unless you configure custom tags.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"Convert .po files to JSON using 'npx ttag po2json translations.po -o translations.json' before passing to the plugin.","message":"Translations file must be in JSON format (e.g., from 'ttag po2json'). Using .po or .pot directly will not work for runtime resolution.","severity":"gotcha","affected_versions":">=1.0"}],"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 ttag' to install the runtime dependency.","cause":"The runtime package 'ttag' is not installed or not in node_modules.","error":"Error: Could not find module 'ttag'"},{"fix":"Run 'npm install --save-dev babel-plugin-ttag' and ensure your Babel config is correct.","cause":"The plugin is not installed or Babel cannot resolve it.","error":"BabelError: Cannot find module 'babel-plugin-ttag' from ..."},{"fix":"Add 'babel-plugin-ttag' to your Babel plugins array and ensure Babel is processing the file.","cause":"The template literal uses a tag function (e.g., t) but the plugin is not enabled or configured.","error":"SyntaxError: Unexpected token (or similar parsing error) when using template literal with translation"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}