{"id":20498,"library":"react-intl.macro","title":"react-intl.macro","description":"Run react-intl at build-time with babel-plugin-macros. Current stable version is 0.3.7 (last released Feb 2020; no recent updates, likely maintenance mode). It extracts react-intl defineMessages, FormattedMessage, and FormattedHTMLMessage calls into JSON files during build, leveraging babel-plugin-macros without needing a separate Babel plugin. Different from babel-plugin-react-intl (requires explicit Babel config) and react-intl-cra (Create React App specific) – this macro approach works with any macro-enabled setup (CRA, Next.js, custom builds). Requires react-intl@2 and babel-plugin-macros.","status":"maintenance","version":"0.3.7","language":"javascript","source_language":"en","source_url":"https://github.com/evenchange4/react-intl.macro","tags":["javascript"],"install":[{"cmd":"npm install react-intl.macro","lang":"bash","label":"npm"},{"cmd":"yarn add react-intl.macro","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-intl.macro","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; the macro replaces imports from react-intl but react-intl is still required for runtime","package":"react-intl","optional":false},{"reason":"Required for macro to work; must be installed and configured in Babel config","package":"babel-plugin-macros","optional":false}],"imports":[{"note":"Replace react-intl import with react-intl.macro to enable build-time extraction","wrong":"import { defineMessages } from 'react-intl'","symbol":"defineMessages","correct":"import { defineMessages } from 'react-intl.macro'"},{"note":"FormattedMessage from the macro extracts defaultMessage during build","wrong":"import { FormattedMessage } from 'react-intl'","symbol":"FormattedMessage","correct":"import { FormattedMessage } from 'react-intl.macro'"},{"note":"FormattedHTMLMessage is also provided by the macro for extraction","wrong":"import { FormattedHTMLMessage } from 'react-intl'","symbol":"FormattedHTMLMessage","correct":"import { FormattedHTMLMessage } from 'react-intl.macro'"}],"quickstart":{"code":"// Install dependencies\n// yarn add react-intl.macro react-intl babel-plugin-macros\n\n// babel-plugin-macros.config.js\nmodule.exports = {\n  'react-intl': {\n    verbose: false,\n  },\n};\n\n// Component.js\nimport { defineMessages, FormattedMessage } from 'react-intl.macro';\n\nconst messages = defineMessages({\n  'App.greet': {\n    id: 'App.greet',\n    defaultMessage: 'Hello, {name}!',\n    description: 'Greeting to welcome the user',\n  },\n});\n\nconst App = () => (\n  <FormattedMessage\n    id=\"App.welcome\"\n    defaultMessage=\"Welcome to our app\"\n    description=\"Welcome message\"\n  />\n);\n\n// Build with MESSAGE_DIR environment variable\n// MESSAGE_DIR='./.messages' react-scripts build\n// Output: .messages/App.json containing extracted messages","lang":"javascript","description":"Shows installation, config, and usage of react-intl.macro to replace react-intl imports and extract messages during build."},"warnings":[{"fix":"Use react-intl v2.x or consider alternative extraction tools for modern react-intl.","message":"Requires react-intl@2; not compatible with react-intl v3+ (which uses createIntl and Provider changes).","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Set MESSAGE_DIR to a directory path, e.g., MESSAGE_DIR='./.messages' react-scripts build","message":"MESSAGE_DIR environment variable must be set during build; otherwise no output is produced.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Consider using babel-plugin-react-intl (v9+) or @formatjs/cli for extraction in modern projects.","message":"Package last updated in 2020; no longer maintained. May not work with newer Babel or macro versions.","severity":"deprecated","affected_versions":">=0.0.0"},{"fix":"Keep injectIntl and other non-extracted imports from 'react-intl'; only replace extraction-targets with react-intl.macro.","message":"Only extracts defineMessages, FormattedMessage, and FormattedHTMLMessage. Other react-intl components (e.g., injectIntl) are not extracted and must still be imported from 'react-intl'.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Install react-intl.macro and babel-plugin-macros; ensure Babel config includes 'macros' plugin.","cause":"Missing installation or babel-plugin-macros not configured.","error":"Module not found: Can't resolve 'react-intl.macro'"},{"fix":"Run 'yarn add babel-plugin-macros' and add 'macros' to your Babel plugins in babel.config.js.","cause":"babel-plugin-macros is not installed or not in the Babel plugins list.","error":"Error: [BABEL] ...: Cannot find module 'babel-plugin-macros'"},{"fix":"Set MESSAGE_DIR environment variable (e.g., MESSAGE_DIR='./.messages') and ensure imports come from 'react-intl.macro', not 'react-intl'.","cause":"MESSAGE_DIR environment variable not set or macro not correctly replacing imports.","error":"No message output files generated after build"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}