react-intl-webpack-plugin

0.3.1 verified Sat Apr 25 auth: no javascript

This webpack plugin integrates with babel-plugin-react-intl to extract and aggregate internationalization messages from React components into a single JSON file, typically named reactIntlMessages.json. Version 0.3.1 is the latest stable release. It assists in the i18n workflow by combining extracted message descriptors during the webpack build and placing the output in the webpack output directory. Compared to other i18n tools, it focuses on the extraction and aggregation step for webpack-based React projects, leveraging babel metadata. It requires babel-loader >= 6.0.0, babel-plugin-react-intl >= 2.3.0, and webpack >= 4.0.0. The plugin is designed to work with translation memory tools and a separate reactIntlJson-loader for loading translated JSON files.

Common errors

error TypeError: ReactIntlPlugin is not a constructor ↓

cause Using named import instead of default import.

fix

Use: const ReactIntlPlugin = require('react-intl-webpack-plugin');

error Error: Cannot find module 'react-intl-webpack-plugin' ↓

cause Package not installed or missing from node_modules.

fix

Run npm install react-intl-webpack-plugin --save-dev

Warnings

gotcha When using webpack-dev-server, assets are only in memory; the output file is not written to disk. ↓

fix Access via http://localhost:port/reactIntlMessages.json or run a production build to write the file to disk.

gotcha If no messages are generated, babel-loader's cache may be stale; clean the cache or set cacheDirectory to false. ↓

fix Delete .babel-cache or set cacheDirectory: false temporarily.

Install

npm install react-intl-webpack-plugin

yarn add react-intl-webpack-plugin

pnpm add react-intl-webpack-plugin

Imports

default

wrong

const { ReactIntlPlugin } = require('react-intl-webpack-plugin');

correct

const ReactIntlPlugin = require('react-intl-webpack-plugin');
// or
import ReactIntlPlugin from 'react-intl-webpack-plugin';

The package exports a single constructor; named import is incorrect.

metadataContextFunctionName
```
ReactIntlPlugin.metadataContextFunctionName
```
Used in babel-loader query under metadataSubscribers.

Quickstart

Configures webpack with babel-loader and react-intl-webpack-plugin for i18n message extraction.

// webpack.config.js
const ReactIntlPlugin = require('react-intl-webpack-plugin');

module.exports = {
  // ... other config
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            metadataSubscribers: [ReactIntlPlugin.metadataContextFunctionName],
            plugins: [
              '@babel/plugin-transform-runtime',
              ['react-intl', { enforceDescriptions: false }]
            ],
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      }
    ]
  },
  plugins: [
    new ReactIntlPlugin()
  ]
};