react-intl.macro

0.3.7 verified Sat Apr 25 auth: no javascript maintenance

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.

Common errors

error Module not found: Can't resolve 'react-intl.macro' ↓

cause Missing installation or babel-plugin-macros not configured.

fix

Install react-intl.macro and babel-plugin-macros; ensure Babel config includes 'macros' plugin.

error Error: [BABEL] ...: Cannot find module 'babel-plugin-macros' ↓

cause babel-plugin-macros is not installed or not in the Babel plugins list.

fix

Run 'yarn add babel-plugin-macros' and add 'macros' to your Babel plugins in babel.config.js.

error No message output files generated after build ↓

cause MESSAGE_DIR environment variable not set or macro not correctly replacing imports.

fix

Set MESSAGE_DIR environment variable (e.g., MESSAGE_DIR='./.messages') and ensure imports come from 'react-intl.macro', not 'react-intl'.

Warnings

gotcha Requires react-intl@2; not compatible with react-intl v3+ (which uses createIntl and Provider changes). ↓

fix Use react-intl v2.x or consider alternative extraction tools for modern react-intl.

gotcha MESSAGE_DIR environment variable must be set during build; otherwise no output is produced. ↓

fix Set MESSAGE_DIR to a directory path, e.g., MESSAGE_DIR='./.messages' react-scripts build

deprecated Package last updated in 2020; no longer maintained. May not work with newer Babel or macro versions. ↓

fix Consider using babel-plugin-react-intl (v9+) or @formatjs/cli for extraction in modern projects.

gotcha Only extracts defineMessages, FormattedMessage, and FormattedHTMLMessage. Other react-intl components (e.g., injectIntl) are not extracted and must still be imported from 'react-intl'. ↓

fix Keep injectIntl and other non-extracted imports from 'react-intl'; only replace extraction-targets with react-intl.macro.

Install

npm install react-intl.macro

yarn add react-intl.macro

pnpm add react-intl.macro

Imports

defineMessages
wrong
```
import { defineMessages } from 'react-intl'
```
correct
```
import { defineMessages } from 'react-intl.macro'
```
Replace react-intl import with react-intl.macro to enable build-time extraction

FormattedMessage

wrong

import { FormattedMessage } from 'react-intl'

correct

import { FormattedMessage } from 'react-intl.macro'

FormattedMessage from the macro extracts defaultMessage during build

FormattedHTMLMessage

wrong

import { FormattedHTMLMessage } from 'react-intl'

correct

import { FormattedHTMLMessage } from 'react-intl.macro'

FormattedHTMLMessage is also provided by the macro for extraction

Quickstart

Shows installation, config, and usage of react-intl.macro to replace react-intl imports and extract messages during build.

// Install dependencies
// yarn add react-intl.macro react-intl babel-plugin-macros

// babel-plugin-macros.config.js
module.exports = {
  'react-intl': {
    verbose: false,
  },
};

// Component.js
import { defineMessages, FormattedMessage } from 'react-intl.macro';

const messages = defineMessages({
  'App.greet': {
    id: 'App.greet',
    defaultMessage: 'Hello, {name}!',
    description: 'Greeting to welcome the user',
  },
});

const App = () => (
  <FormattedMessage
    id="App.welcome"
    defaultMessage="Welcome to our app"
    description="Welcome message"
  />
);

// Build with MESSAGE_DIR environment variable
// MESSAGE_DIR='./.messages' react-scripts build
// Output: .messages/App.json containing extracted messages