Babel V6 + React-intl V2 + Webpack Extraction Of Messages To File

- 1 answer

I would like to extract the messages from the source code to a JSON file, using Babel v6, react-intl v2, and webpack. It's all compiling fine, but not extracting anything. How do I make v2 of react-intl properly extract the messages?

There's an option messagesDir:

I've tried:

  "extra": {
    "react-intl": {
      "messagesDir": "./i18n",
      "enforceDescriptions": true

With webpack config

{ test: /\.js$/,
  loader: 'babel-loader',
  query: {
    // react needed for JSX syntax
    // es2015 needed for modules
    // stage0 needed to do splats (...variable)
    presets: ['react', 'es2015', 'stage-0'],
    // react-intl extracts i18n messages to a shared file
    // add-module-exports removes the need to do `require('a').default`
    plugins: ['react-intl', 'add-module-exports'],
    cacheDirectory: true
  exclude: /node_modules|bower_components/

gives: "index.js: Unknown option: /.babelrc.extra" as the error message.

I've tried adding the above extra property to the webpack configuration above, too. It gives a very similar error message.


✗ npm ls | grep "intl"
├─┬ [email protected]
│ └── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├─┬ [email protected]
│ ├── [email protected]


The answer is to use a very custom webpack syntax:

Syntax is thus:

5 plugins: [ - ['react-intl', { 6 'messagesDir': './i18n' 6 }], 'add-module-exports']