{"id":20501,"library":"react-intl-webpack-plugin","title":"react-intl-webpack-plugin","description":"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.","status":"active","version":"0.3.1","language":"javascript","source_language":"en","source_url":"https://github.com/Ognian/react-intl-webpack-plugin","tags":["javascript"],"install":[{"cmd":"npm install react-intl-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add react-intl-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-intl-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for Babel integration","package":"babel-loader","optional":false},{"reason":"Peer dependency for extracting messages","package":"babel-plugin-react-intl","optional":false},{"reason":"Peer dependency for webpack plugin integration","package":"webpack","optional":false}],"imports":[{"note":"The package exports a single constructor; named import is incorrect.","wrong":"const { ReactIntlPlugin } = require('react-intl-webpack-plugin');","symbol":"default","correct":"const ReactIntlPlugin = require('react-intl-webpack-plugin');\n// or\nimport ReactIntlPlugin from 'react-intl-webpack-plugin';"},{"note":"Used in babel-loader query under metadataSubscribers.","wrong":"","symbol":"metadataContextFunctionName","correct":"ReactIntlPlugin.metadataContextFunctionName"}],"quickstart":{"code":"// webpack.config.js\nconst ReactIntlPlugin = require('react-intl-webpack-plugin');\n\nmodule.exports = {\n  // ... other config\n  module: {\n    rules: [\n      {\n        test: /\\.jsx?$/,\n        exclude: /node_modules/,\n        use: {\n          loader: 'babel-loader',\n          options: {\n            cacheDirectory: true,\n            metadataSubscribers: [ReactIntlPlugin.metadataContextFunctionName],\n            plugins: [\n              '@babel/plugin-transform-runtime',\n              ['react-intl', { enforceDescriptions: false }]\n            ],\n            presets: ['@babel/preset-env', '@babel/preset-react']\n          }\n        }\n      }\n    ]\n  },\n  plugins: [\n    new ReactIntlPlugin()\n  ]\n};","lang":"javascript","description":"Configures webpack with babel-loader and react-intl-webpack-plugin for i18n message extraction."},"warnings":[{"fix":"Access via http://localhost:port/reactIntlMessages.json or run a production build to write the file to disk.","message":"When using webpack-dev-server, assets are only in memory; the output file is not written to disk.","severity":"gotcha","affected_versions":">=0.0"},{"fix":"Delete .babel-cache or set cacheDirectory: false temporarily.","message":"If no messages are generated, babel-loader's cache may be stale; clean the cache or set cacheDirectory to false.","severity":"gotcha","affected_versions":">=0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use: const ReactIntlPlugin = require('react-intl-webpack-plugin');","cause":"Using named import instead of default import.","error":"TypeError: ReactIntlPlugin is not a constructor"},{"fix":"Run npm install react-intl-webpack-plugin --save-dev","cause":"Package not installed or missing from node_modules.","error":"Error: Cannot find module 'react-intl-webpack-plugin'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}